How to call router outlet child component method from parent comonent

Question

I am new to angular2

<parent>
    <router-outlet><router-outlet>
</parent>

I have a button in parent component, if I click that button it should call a method in the child component (which is loaded in router outlet.)

Is there any way to call the child component (in router outlet) method from parent ?

Answer 1

There are basically two ways to display a component's template: As a nested component or as a routing target.

Nested Component

If you use a nested component, then the components are considered to have a "parent component/child component" relationship.

The Html for the parent component would then look like this:

<div>
   <child></child>
</div>

Where "child" is the selector of the child component. You can then communicate between the two using @Input and @Output properties.

For more information on this technique when you have nested components, check out the docs here: https://angular.io/guide/component-interaction

Routing Target

If you use a component as a routing target by displaying it in a <router-outlet> , then there is no "parent component" and "child component" relationship.

The best way to communicate between components in this case is to use a service.

I have a blog post about creating a service here: https://blogs.msmvps.com/deborahk/build-a-simple-angular-service-to-share-data/

Resources

If you are new to Angular, you may save your self a bunch of time and frustration by working through a tutorial or online course. That will introduce all of the basic concepts to get you on your way with Angular quickly.

You can work through the "Tour of Heroes" tutorial here: https://angular.io/tutorial

Or watch a course such as this one: https://app.pluralsight.com/library/courses/angular-2-getting-started-update

Or this one: https://app.pluralsight.com/library/courses/angular-2-first-look/table-of-contents

(You can sign up for a free week.)

Answer 2

With child in router-outlet , you can use ContentChild to be able to call a method in the child. So...

import { ContentChild } from '@angular/core';

in your parent:

@ContentChild(ChildComponent)
private childComponent: ChildComponent;

and on your click event do:

this.childComponent.doSomething()

Also you need to add your child component in the providers array in parent:

@Component({
  selector: 'parent',
  ...
  providers: [ChildComponent]
})

Answer 3

I found two ways to achieve this:

1. Injecting the main component into children

You can add an event to your main component, inject the main component to your child components and subscribe to the event. See the plunk that illustrates this. But, now your children have a dependency on your main component. This may be not good.

main component

executeAction: EventEmitter<any> = new EventEmitter();
constructor() { }
performAction() {
  this.executeAction.emit();
}

child

constructor(private appComponent: AppComponent) {
    this.executeAction = this.executeAction.bind(this);
    eventSubscriber(appComponent.executeAction, this.executeAction);
}
ngOnDestroy(): void {
    eventSubscriber(this.appComponent.executeAction, this.executeAction, true);
}
executeAction() {
    alert('1');
}

2. Implementing a service

The best solution here and as described in Parent and children communicate via a service is to create a service that will be an additional layer between the main component and children. In this way, you will be independent from the main component implementation. See the plunk that illustrates this approach.

service

subscription = new Subject();
executeAction() {
    this.subscription.next();
}

main component

constructor(private appService: AppService) { }
performAction() {
  this.appService.executeAction();
}

child

constructor(private appService: AppService) {
    this.executeAction = this.executeAction.bind(this);
    eventSubscriber(appService.subscription, this.executeAction);
}
ngOnDestroy(): void {
    eventSubscriber(this.appService.subscription, this.executeAction, true);
}
executeAction() {
    alert('1');
}

Answer 4

I think Event emitter can do the trick for you

Though you can use it directly in child component also but using a common service here would be a good practice

First you need to create an emitter in a service something like

export class EmitterService {
   public nameEmitter:EventEmitter<string>=new EventEmitter(); 

    //method to get question
    changeName(name:string){   
        this.nameEmitter.emit(name)    
    }

}

Then in root component inject service dependency and call change name method to emit the change

 constructor(private emitter :EmitterService) {}
 this.emitter.changeName("New Name");

And at the end in child component subscribe to changes

this.emitter.nameEmitter.subscribe(name=>{this.name=name})

Here is working plunker

Answer 5

You can use a shared service to communicate with components added by the router.

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

Template

<router-outlet (activate)="onActivate($event)"></router-outlet>

Component

  onActivate(componentRef){
    componentRef.works();
  }

Child Comp

 works(){
    console.log("works");
  }

Answer 6

This can be achieved by the following way as well:

.html

<parent>
    <router-outlet (activate)="onActivate($event)"><router-outlet>
</parent>

.ts

activatedComponentReference:any

onActivate(activatedComponentReference) {
  this.activatedComponentReference = activatedComponentReference;
}

onBtnClick() {
   const childRouteComp = this.activatedComponentReference as ChildRouteComponent;
   childRouteComp.childFunction();
}

Answer 7

There are two ways to call router outlet child component method from the parent component.

1. ViewChild/ViewChildren - You can use ViewChild/ViewChildren to get the element(s) or the directive(s) matching the selector from the view DOM. It doesn't matter child component is rendered by router outlet.

   import { ViewChild } from '@angular/core'; @ViewChild(HomeComponent) private childComponent: HomeComponent;

Then you can call any method,

this.childComponent.changeTitle();

Demo - call router outlet child component method

2. Shared services - Since angular services are singleton by injecting them to your controllers you can call methods. (Above answers are already mentioned this approach)

Answer 8

After i searched a lot about this issue, i found a solution and wish it could help you. contentChild/ViewChild have no access to component(and it's data) that is loaded in router-outlet, and using sharedService needs an extra file and more code.

You just need to read component that is loaded in the router outlet:

1. Add template reference to your router outlet:

    <router-outlet #myRouterOutlet ></router-outlet>

2. Import the RouterOutlet from @angular/router :

    import {... RouterOutlet, ..} from "@angular/router";

3. And finally, use it:

    @ViewChild("myRouterOutlet", { static: true }) routerOutlet: RouterOutlet; buttonClicked(){ const childComp = this.routerOutlet.component as childComponent; childComp.childFunction(); }

Hope it could help you :)

Answer 9

Although it is an old questions, all the replies here are not perfect.

By using either service or child instance, you bind yourself to a specific function name that you need to call. service also forces you to use dependency injection.

There is a better way, by using a directive which makes each side completely independent from the other.

the directive is ng-router-outlet-comm .

Answer 10

None of the above solution worked for me in Angular 10. Let me share with you CustomEventHandler service I created to manage this problem:

@Injectable()
export class CustomEventHandler {

    private eventHandlersMap: Map<string, Function> = new Map();

    constructor() {
    }

    public callEvent(eventName: string, data?: any): void {
        this.eventHandlersMap.get(eventName)(data);
    }

    public addListener(eventName: string, callback: Function): void {
        this.eventHandlersMap.set(eventName, callback);
    }
}

You can addListener in child component constructor and call any method in component from parent.

// add listener in child component
this.customEventHandler.addListener("some-event", this.someMethodToCall.bind(this));
// call this in parent component
this.customEventHandler.callEvent("some-event");