Angular: Pass Component to a Component

You should not use an @Input to pass in the components. You can use @ContentChildren for that and an abstract WidgetComponent:

@Component({    selector: 'moving-grid',    template: `      <div class="widget-wrapper">         <ng-container *ngFor="let widget of widgets">             <!-- use a ngSwitchCase here for different types-->             <grid-test-widget [widget]="widget" *ngIf="widget.active && widget.type === 'test'"></grid-widget>         </ng-container>                </div>    `,    styleUrls: ['./grid.component.css']})export class GridComponent implements AfterContentInit {     @ContentChildren('widget')     widgets: QueryList<WidgetComponent>;     ngAfterContentInit() {        //your components will be available here     }}

The template of your third component will stay the same, but without the [widgets] and an added #widget name:

<moving-grid>   <test-widget class="grid-item-content-001" #widget [active]="false"></test>  <test-widget class="grid-item-content-002" #widget></test></moving-grid>

Your TestWidgetComponent which will extend an abstract WidgetComponent :

@Component({  selector: 'test-widget',  // ...})export class TestWidgetComponent extends WidgetComponent {    public type: string = 'test';}

And your WidgetComponent:

@Directive()export abstract class WidgetComponent {   @Input()   public active: boolean;   public type: string;}

And you'll have several grid widgets based on the type of the widget:

@Component({  selector: 'grid-test-widget',  template: `<div #content>I say hello<li>i</li><li>u</li><button (click)="test()">click me</button> world</div>`})export class GridTestWidgetComponent{}