title: Declare a component with generic type
body: <p>Is it possible to declare a component with a generic type in Angular 4?</p>
  
  <p>The following code causes build errors:</p>
  
  <pre><code>export class MyGenericComponent&lt;T&gt; implements OnInit {
      @Input()  data: BehaviorSubject&lt;T[]&gt;;
  
      //...
  }
  </code></pre>
  
  <p>The error when executing <code>ng serve</code> is:</p>
  
  <pre><code>ERROR in C:/.../my-generic.module.ts (5,10): Module '"C:/.../my-generic.component"' has no exported member 'MyGenericComponent'.
  </code></pre>
  
  <p><strong>Example:</strong></p>
  
  <p>The following example is an attempt to implement a generic data table where <code>@Input() data</code> changes from one component 'calling this component' to another. 
  The question is could <code>BehaviorSubject&lt;any[]&gt;</code> be changed to <code>BehaviorSubject&lt;T[]&gt;</code> where <code>T</code> would be the generic type passed to the component?</p>
  
  <pre><code>@Component({
    selector: 'my-data-list',
    templateUrl: './data-list.component.html',
    styleUrls: ['./data-list.component.css']
  })
  export class DataListComponent implements OnInit {
    @Input()  data: BehaviorSubject&lt;any[]&gt;;
    @Output() onLoaded = new EventEmitter&lt;boolean&gt;();
  
    private tableDataBase : TableDataBase = new TableDataBase();
    private dataSource : TableDataSource | null;
  
    constructor() { }
  
    ngOnInit() {
      this.tableDataBase.dataChange = this.data;
      this.dataSource = new TableDataSource(this.tableDataBase);
      this.onLoaded.emit(true);
    }
  }
  
  class TableDataBase {
    dataChange: BehaviorSubject&lt;any[]&gt; = new BehaviorSubject&lt;any[]&gt;([]);
  
    get data(): any[] {
      return this.dataChange.value;
    }
  }
  
  class TableDataSource extends DataSource&lt;any&gt; {
  
    constructor(private tableDataBase: TableDataBase) {
      super();
    }
  
    connect(): Observable&lt;any[]&gt; {
      return Observable.of(this.tableDataBase.data);
    }
  
    disconnect() {}
  }
  </code></pre>