2

I have five components in my project at the time which are

1: AppComponent (Main component)
2: AuthComponent
3: HomeComponent
4: HeaderComponent
5: FooterComponent

Html for "AppComponent" is

<section class="app content-area">
<ng2-slim-loading-bar  [height]="'4px'"></ng2-slim-loading-bar>
<fds-header *ngIf="_appDataService.isLoggedIn"></fds-header>
<router-outlet></router-outlet>
<fds-footer></fds-footer>

Now "HomeComponent" and "AuthComponent" is rendering in "router-outlet" and "AuthComponent" have method for login and logout. In "HeaderComponent" there is a button for logout and when it clicked I want to call logout method of "AuthComponent". Now here I cannot use "Template variable" for "AuthComponent" as answered there because it is rendering in "router-outlet". So how it can be done?

Community
  • 1
  • 1
Shams Tabraiz Alam
  • 111
  • 1
  • 2
  • 12
  • You can use a common service as mentioned by ranakrunal9, but for communication between sibling component you can use eventemitter also, check out this anwser http://stackoverflow.com/questions/35685801/angular-2-event-catching-between-sibling-components – Sriram Jan 02 '17 at 06:01

1 Answers1

3

You have to create one common service which shared between your HeaderComponent and AuthComponent and with this service you can communicate between HeaderComponent and AuthComponent. Check Parent and children communicate via a service documentation and my answer for parent-child comunication

Community
  • 1
  • 1
ranakrunal9
  • 13,320
  • 3
  • 42
  • 43
  • but "HeaderComponent" and "AuthComponent" are siblings not parent child – Shams Tabraiz Alam Jan 02 '17 at 05:45
  • I have used "Subject" it work fine but when I refresh the page then it no longer work. – Shams Tabraiz Alam Jan 02 '17 at 05:47
  • you can use common service to communicate between siblings `HeaderComponent` and `AuthComponent` – ranakrunal9 Jan 02 '17 at 05:56
  • On log out button click in `HeaderComponent`, you need to emit the method from your service which needs to be already subscribed by `AuthComponent` so that you can perform your action on event trigger – ranakrunal9 Jan 02 '17 at 05:59
  • I am doing the same thing as you describe but when I refresh the page then it does not work. first time without refreshing the page it work. – Shams Tabraiz Alam Jan 02 '17 at 06:33
  • can you please explain, on page refresh whats not working ? because i do not have any idea on page refresh what you have implemented and how. – ranakrunal9 Jan 02 '17 at 06:44
  • I have used a common service between "AuthComponent" and "HeaderComponent" and on click of logout button I have used this line "this.logoutService.notifyOther(true)" and in "AuthComponent" I am catching this event. When first time I logged in and then without doing anything when I clicked logout this event is catch successfully in AuthComponent but when I refresh the page or go to any other state then on logout click nothing happen means AuthComponent does not catch the event. – Shams Tabraiz Alam Jan 02 '17 at 07:04
  • it should work may be some thing else is blocking it. share your code or create plunker to show the issue – ranakrunal9 Jan 02 '17 at 07:10
  • I found out what is the issue. After login user is redirected to dashboard state and when I refresh the dashboard state whole application is re-initialized and this time "AuthComponent" is not created so AuthComponent is not registered to catch event. So how I can handle this situation. – Shams Tabraiz Alam Jan 02 '17 at 07:27