Angular 2 load child component on click

16

votes

Is it possible to load the child component when button in parent template is clicked? For instance, the parent template html would look like:

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

The reason I want to do it like that is because the my-child-component takes some time to load and it slows down everything. Therefore, I'd like to load it only if user clicks to load it. I cannot change the parent template structure. It has to be there.

I want to enter ngOnInit of child's component only when load button is clicked.

angular

29

votes

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

5

votes

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

2

votes

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

2

votes

<button (click)="loadMyChildComponent()">Load</button>
<div [hidden]="hide">
<my-child-component></my-child-component>
</div>

In parent class declare the varible hide and make a function loadMyChildComponent

 public hide = true;
  loadMyChildComponent(){
       this.hide= true;
    }

0

votes

You can use angular directive *ngIf

<button (click)="loadChildComponent();">Load Child Component</button> <child-component *ngIf="childComponentLoaded"></child-component>

in your component.js

public childComponentLoaded: boolean = false;
loadChildComponent() {
    this.childComponentLoaded = true
}

Angular 2 load child component on click

5 Answers