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