Angular 2 shared component with component as attributes

Question

I have a shared Component that can show a toggle button, this toggle button let you switch between two childs components, this two components must be passed as input from the parents that call the SharedComponent. Please any idea ?

Answer 1

I think ngComponentOutlet ist what you are looking for: https://angular.io/api/common/NgComponentOutlet

You can then do something like this:

<a (click)="doSwitch()">Switch</a>
<ng-container *ngComponentOutlet="component1"></ng-container>
<ng-container *ngComponentOutlet="component2"></ng-container>

in typescript:

Input()
component1: Type<any>;

Input()
component2: Type<any>;

...

when using the component:

<switch-component [component1]="comp1" [component2]="comp2"></switch-component>

comp1: Type = ParentComponent1;
comp2: Type = ParentComponent2;