ngFor on Components in a Feature Module declarations

Question

Is it possible to do an ngFor on Components listed in a feature module's declarations? They all have a few things in common such as title, settings actions, view all, but otherwise the components each do very different things, display different data etc. Does anybody know of a way to best accomplish this?

Answer 1

I found the following solution that I repurposed to use with my own code. Please review and lmk what you think.

Home Module:

export const routes: Routes = [
    { path: '', component: HomePageComponent }
];

@NgModule({
    imports: [CommonModule,
        RouterModule.forChild(routes),
        MdGridListModule,
        MdCardModule,
        MdIconModule,
        MdButtonModule
    ],
    declarations: [
        HomePageComponent,
        HomeDashboardComponent,
        HomeGizmoComponent,
        HighlightsComponent,
        LawsregComponent,
        NewsComponent,
        StarComponent,
        TracComponent,
        BudgetComponent,
        The12gComponent
    ],
    entryComponents: [
        HighlightsComponent,
        LawsregComponent,
        NewsComponent,
        StarComponent,
        TracComponent,
        BudgetComponent,
        The12gComponent
    ],
    providers: []
})
export class HomeModule { }

Home Component:

@Component({
  selector: 'home',
  template: `<home-dashboard [gizmos]="types"></home-dashboard>`
})
export class HomePageComponent {
    types = [
        HighlightsComponent,
        LawsregComponent,
        NewsComponent,
        StarComponent,
        TracComponent,
        BudgetComponent,
        The12gComponent
    ];



  constructor(title: Title) {
      title.setTitle('Home');

  }


}

Home Dashboard Component:

@Component({
  selector: 'home-dashboard',
  template: `
    <md-grid-list cols="3" gutterSize="1rem" >
  <md-grid-tile *ngFor="let gizmo of gizmos">
    <md-card><home-gizmo-component [type]="gizmo"></home-gizmo-component></md-card>
  </md-grid-tile>
</md-grid-list>

`
})
export class HomeDashboardComponent {
    @Input() gizmos;

  constructor() {

  }
}

Home Gizmo Component:

@Component({
  selector: 'home-gizmo-component',
  template: ` <div #target></div>`
})
export class HomeGizmoComponent {
    @ViewChild('target', { read: ViewContainerRef }) target: ViewContainerRef;
    @Input() type: Type<Component>;
    cmpRef: ComponentRef<Component>;
    private isViewInitialized: boolean = false;

    constructor(private componentFactoryResolver: ComponentFactoryResolver, private compiler: Compiler) { }

    updateComponent() {
        if (!this.isViewInitialized) {
            return;
        }
        if (this.cmpRef) {
            // when the `type` input changes we destroy a previously 
            // created component before creating the new one
            this.cmpRef.destroy();
        }

        let factory = this.componentFactoryResolver.resolveComponentFactory(this.type);
        this.cmpRef = this.target.createComponent(factory)
        // to access the created instance use
        // this.compRef.instance.someProperty = 'someValue';
        // this.compRef.instance.someOutput.subscribe(val => doSomething());
    }

    ngOnChanges() {
        this.updateComponent();
    }

    ngAfterViewInit() {
        this.isViewInitialized = true;
        this.updateComponent();
    }

    ngOnDestroy() {
        if (this.cmpRef) {
            this.cmpRef.destroy();
        }
    }
}

Answer 2

You could write a parent class component and have child components inherit from the parent using extend.

Base component:

@Component({
  selector : 'my-base',
  template: `
    <div>
      Am I the base component: {{isBase}}?
    </div>
  `
})
export class BaseComponent {
  @Input() isBase: boolean = true;
}

Child component:

@Component({
  selector : 'my-inherited',
  template: `
    <div>
      I'm def not the {{isBase}}!
    </div>
  `
})
export class InheritedComponent extends BaseComponent {}

In use:

@Component({
  selector: 'my-app',
  template: `
    <div>
      <my-base></my-base>
      <hr />
      <my-inherited [isBase]="false"></my-inherited>
    </div>
  `
})
export class App { }