title: Making an abstract component to iterate through a list
body: <p>I got severals components who all look like this :</p>
  
  <pre class="lang-js prettyprint-override"><code>import { Component, Input, Output } from '@angular/core';
  import { Subject } from 'rxjs';
  import { Tag } from 'src/app/models';
  
  @Component({
    selector: 'app-tag-list',
    templateUrl: './tag-list.component.html',
    styleUrls: ['./tag-list.component.scss'],
  })
  export class TagListComponent  {
    @Input() public tagList: Tag[];
  
    @Input() public displayLabel = true;
    @Input() public linkActivated = true;
  
    @Output() public tagClicked = new Subject&lt;Tag&gt;();
  
    constructor() {}
  
    public onTagClick(tag: Tag): void {
      this.tagClicked.next(tag);
    }
  }
  </code></pre>
  
  <pre class="lang-html prettyprint-override"><code>&lt;span *ngIf="displayLabel"&gt;
    {{ "tag.tags" | translate }}
    {{ "punctuation.doublePoints" | translate }}
  &lt;/span&gt;
  
  &lt;ul class="list-no-style"&gt;
    &lt;li *ngFor="let tag of tagList" (click)="onTagClick(tag)"&gt;
      &lt;a
        *ngIf="linkActivated; else noLink"
        class="list-element link-no-style"
        [routerLink]="['/tag/' + tag.urlName]"
      &gt;
        {{ tag.label }}
      &lt;/a&gt;
  
      &lt;ng-template #noLink&gt;
        &lt;span class="list-element"&gt;
          {{ tag.label }}
        &lt;/span&gt;
      &lt;/ng-template&gt;
    &lt;/li&gt;
  &lt;/ul&gt;
  </code></pre>
  
  <p>The only difference between these components is the Object displayed, for example it can be Artist instead of Tag.</p>
  
  <p>So I want to write a component (let say AbstractListComponent) who can iterate through a list and let me display the content through the parent like <code>ng-content</code>.</p>
  
  <p>So my TagListComponent template could look something like this :</p>
  
  <pre class="lang-html prettyprint-override"><code>&lt;abstract-list
    [dataSource]="tagList"
    [routerLinkString]="tag"
    [linkActivated]="linkActivated"
    [displayLabel]="displayLabel"
    (elementClicked)="onTagClick($e)"
  &gt;
    &lt;ng-container *cellDef="let tag"&gt;
      {{ tag.label }}
    &lt;/ng-container&gt;
  &lt;/abstract-list&gt;
  </code></pre>
  
  <p>So the idea is to make a custom MatTable component, but I got no idea how to write AbstractListComponent to achieve something like this.</p>