Angular 2 Load Child Component On Click

Answer :

You can use *ngIf directive for the initing component from parent, so your code will be like this

<button (click)="loadMyChildComponent();">Load</button> <my-child-component *ngIf="loadComponent"></my-child-component>  loadMyChildComponent() {   loadComponent = true;   ... } 

Make use of flag to control the load of child component.

<button (click)="loadMyChildComponent();">Load</button> <div *ngIf= 'loadComponent'> <my-child-component></my-child-component> </div> 

In your parent component .ts

 private loadComponent = false;     loadMyChildComponent(){        this.loadComponent = true;     } 

You can use perhaps the most fundamental directive ngIf

<button (click)="loadMyChildComponent();">Load</button> <my-child-component *ngIf="loaded"></my-child-component> 

In your component

loadMyChildComponent(){  loaded=true; }