angulartypescriptangular-componentstypescript-generics

Declare a component with generic type


Is it possible to declare a component with a generic type in Angular 4?

The following code causes build errors:

export class MyGenericComponent<T> implements OnInit {
    @Input()  data: BehaviorSubject<T[]>;

    //...
}

The error when executing ng serve is:

ERROR in C:/.../my-generic.module.ts (5,10): Module '"C:/.../my-generic.component"' has no exported member 'MyGenericComponent'.

Example:

The following example is an attempt to implement a generic data table where @Input() data changes from one component 'calling this component' to another. The question is could BehaviorSubject<any[]> be changed to BehaviorSubject<T[]> where T would be the generic type passed to the component?

@Component({
  selector: 'my-data-list',
  templateUrl: './data-list.component.html',
  styleUrls: ['./data-list.component.css']
})
export class DataListComponent implements OnInit {
  @Input()  data: BehaviorSubject<any[]>;
  @Output() onLoaded = new EventEmitter<boolean>();

  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<any[]> = new BehaviorSubject<any[]>([]);

  get data(): any[] {
    return this.dataChange.value;
  }
}

class TableDataSource extends DataSource<any> {

  constructor(private tableDataBase: TableDataBase) {
    super();
  }

  connect(): Observable<any[]> {
    return Observable.of(this.tableDataBase.data);
  }

  disconnect() {}
}

Solution

  • You can also access the Type parameter through the ViewChild like this:

    export class Bazz {
      name: string;
    
      constructor(name: string) {
        this.name = name;   
      }
    }
    
    @Component({
      selector: 'app-foo',
      template: `<div>{{bazz?.name}}</div>`,
      exportAs: 'appFoo'
    })
    export class FooComponent<T> {
      constructor() {}
      private _bazz: T;
    
      set bazz(b: T) {
        this._bazz = b;
      }
    
      get bazz(): T {
       return this._bazz;
      }
    }
    
    @Component({
      selector: 'app-bar',
      template: `<app-foo #appFoo></app-foo>`,
      styleUrls: ['./foo.component.scss'],
    })
    export class BarComponent<T> implements OnInit {
      @ViewChild('appFoo') appFoo: FooComponent<Bazz>;
    
      constructor() {}
    
      ngOnInit() {
        this.appFoo.bazz = new Bazz('bizzle');
        console.log(this.appFoo.bazz);
      }
    }