Trigger Child Component Method from Parent Component when child component loaded from the routing

Question

I have created a child component which has a method I want to execute when I call the parent component method.

This seems to be duplicate question as below.

Call child component method from parent class - Angular

This works perfectly when i included the child component in the parent component template, like

<parent-comp> <child-comp></child-comp></parent-comp>.

But, in my case i load the child component using routing, in this case i can't execute the child method as viewchild getting null.

Below is the quick start Angular app with my changes.

import { Component, ViewChild } from "@angular/core";
import { ItemCompanyComponent } from "../item/Company/ItemCompanyComponent";

@Component({
    moduleId: module.id,
    selector: "item-add",
    templateUrl: "ItemComponent.html"
})
export class ItemComponent {

    @ViewChild(ItemCompanyComponent) public child: ItemCompanyComponent;

    ngAfterViewInit(): void {
        this.save = () =>  {
            alert("Item Component Save");
            this.child.childsave();
        }
    }

    save(): void {

    }
}



@Component({
    moduleId: module.id,
    selector: "item-company",
    templateUrl: "ItemCompanyComponent.html"
})
export class ItemCompanyComponent {
 childsave(): void {
        alert("Item Company Component Save");
    }
}

ItemComponent.html:

<div class="main-content" fxFlex>
            <router-outlet></router-outlet>
        </div>

I am getting null for child property in item component. Any solution is highly appreciable.

Günter Zöchbauer Günter Zöchbauer · Accepted Answer · 2017-09-28T07:06:00

Use a shared service to communicate with components added by the router.

You can use the activate event for the parent to know when a component was added by the router

<router-outlet (activate)="notifyChild()"></router-outlet>

Trigger Child Component Method from Parent Component when child component loaded from the routing

1 Answers