CODEWITHSUNDEEP
angularangular5
3gwebtrain
3gwebtrain

Reputation: 15293

How to call app component from router-outlet

I am trying to call a method in my app component from my loading page say home page. for that in my home component i use:

@Output() onPopMessage = new EventEmitter<Event>();

    footerLinkHandler(link){
        this.onPopMessage.emit(link);
        return false;
    }

now i need to call the app component. since the home page is sitting in the router-outlet i tried like this:

<div class="wrapper" (onPopMessage) = "onPopMessage()" >
  <header>
    <app-header #dropDownValue></app-header>
  </header>
  <section>
    <router-outlet></router-outlet>
    <app-category-menu [hideDropDownMenu]="dropDownValue.dropDown"></app-category-menu>
    <app-modal-popup></app-modal-popup>
  </section>
  <app-cookie-model (onSetAppCookie) = "setCookies($event)"  ></app-cookie-model>
</div>

In my app component my code is:

onPopMessage(link){
        console.log('called'); //nothing called
    }

so, what is the correct way to call appcomponent from any of the page loaded in the router-outlet?

Upvotes: 0

Views: 812

Answers (1)

Yerkon
Yerkon

Reputation: 4788

I am trying to call a method in my app component from my loading page say home page. Now i need to call the app component. since the home page is sitting in the router-outlet

So, in your homePage component inject AppComponent to the constructor and get full access

HomeComponent:

...
constructor(private appComponent: AppComponent){

}

ngOnInit(){
   this.appComponent.onPopMessage('hello');
}
...

Docs. Find a parent component by injection

Upvotes: 1

Related Questions