Passing more data @input angular 2

Question

How can we switch more than one component to another component? I need to use the "two way data binding".

I tried the following way:

<app-drawer-menu [popup]="getPopupInstance" [appHeader]="getAppHeaderInstance"></app-drawer-menu>


 export class DrawerMenuComponent implements OnInit {


    @Input() private popup: DialogLoginSignupComponent;
    @Input() private appHeader: AppHeaderComponent;

    ....

I need to go to the "DrawerMenuComponent" component "DialogLoginSignupComponent" and "AppHeaderComponent"

this does not work. Where am I wrong?

thx!

Inputs are meant to pass data to child components. Not instances of other components. That's all I can say, beause I agree with Maximus: it's not clear what you're trying to do. — JB Nizet, Jul 08 '17 at 16:27

score 0 · Answer 1 · answered Jul 08 '17 at 16:37

If you want to do so, You'll have to use a Service and pass the component class name to use to your child component. Then, use the ComponentFactoryResolver to create the component like this :

let factory = this.cfr.resolveComponentFactory(MyComponent);
this.cmp = this.modalBody.createComponent(factory);

If you want more details, please looks the file modal.component.ts here : Github link

Passing more data @input angular 2

1 Answers1