Create Generic Component With T in Constructor

Question

I\'m trying to make a generic component to display list resources. I\'m running into issue instantiating the component in HTML. I was using this answer to attempt to fix th

Answer 1

I solved this by delaying the initialization, and making the dependency a @Input property

export class PageListBaseComponent<T extends IHasId> {

    @Input() detailPageType: any;
    @Input() set baseProvider(provider: ProviderBase<T>) {
        provider.getList().subscribe(entities =>  {
            this.entityList = entities;
            console.log(entities);
        });
    }

    public entityList: T[];

    constructor(public navCtrl: NavController, public navParams: NavParams) 
    {

    }

    navigateToDetail(id: number) {
        console.log('test ' + id)
        this.navCtrl.push(this.detailPageType, { id })
    }
}

Then I Modify the Page to take in a concrete implementation of our dependency,

export class UsersPage {

  public userDetailType: any = ProfilePage;

  constructor(public navCtrl: NavController, public navParams: NavParams, public baseProvider: Users) {
      console.log(this.userType);
  }
} 

Then I implement the component like so:

<ion-content padding>
  <page-list-base [detailPageType]="userDetailType" 
      [baseProvider]="baseProvider"></page-list-base>
</ion-content>