1

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.

Bhimisetty
  • 206
  • 1
  • 2
  • 13

1 Answers1

1

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>
Günter Zöchbauer
  • 623,577
  • 216
  • 2,003
  • 1,567
  • 1
    I have almost 20 child components are there. They will be loaded through routing. So when i click on save which lies in the parent component, the loaded child component save need to be invoked. With this (active) event emitter is this possible to achieve ? If not, how could i achieve? – Bhimisetty Sep 28 '17 at 07:21
  • Active only notifies you that a component was added. If you want to notify about "save", there doesn't seem to be a need to use `(activate)="..."`. The rest can be done using a shared service. There are about 1k questions about component communication using a shared service and the docs on angular.io also contain a section in "component communication". – Günter Zöchbauer Sep 28 '17 at 07:23
  • I don't think so a shared service is a good approach in this case. What else option we have? – Bhimisetty Sep 28 '17 at 07:27
  • Actually I think a shared service is the only sane approach (as it is almost always to communicate between components if components are not direct parent/child or direct siblings and not added dynamically like the router does) – Günter Zöchbauer Sep 28 '17 at 07:28
  • Ok, if no rooms open i will enter into this. Thank you for your prompt solution. – Bhimisetty Sep 28 '17 at 07:32