Angular 2 load child component on click

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;
}

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;
    }