0

I have a header component , a footer component , Nav component and Content component on a Page.

 <sa-header></sa-header>
    <sa-navigation></sa-navigation>           
    <div id="main" role="main">
   // I have put Profile page here using routing and I have First name and last name on profile page
      <router-outlet></router-outlet>
    </div>    
    <sa-footer></sa-footer>

Now in router-outlet, I have put a profile page using routing with first name and last name and based on first name and last name of profile page I want to display that name in Header component.

In Header page I have below code:

 <div> <span>{{user.displayName }}</span> <i class="fa fa-angle-down"></i></div>

I try with below link but not useful in my case.

Angular 2 - Update @input value of component on click on different component

Angular 2/TypeScript: @Input/@output or input/output?

I also try get and set those name in session but my header page load first so once I change in profile page it dose not effect header page.

How to change name in header page?

Community
  • 1
  • 1
Hitesh
  • 1,188
  • 5
  • 30
  • 52
  • I think you have two options. 1. Pass the user object to the header component like ``. 2. Use a service to get and set your global user information. – Hinrich Apr 21 '17 at 09:02
  • @Hinrich 3 , I try second option but when I set Display name from profile page then How it will automatically update Header page name? Can You also please give more information of option 1? Thanks – Hitesh Apr 21 '17 at 09:07

1 Answers1

1

i think you can use service to communicate from inner component to outer component

https://angular.io/docs/ts/latest/cookbook/component-communication.html#!#bidirectional-service

jayanthCoder
  • 615
  • 1
  • 6
  • 13
  • This is the right approach. Thx! Additional you can take a look here: https://gist.github.com/rjmccluskey/46dfe9ed6abd4990b4f1a03263ace6de – peter70 Aug 03 '17 at 11:56