Angular 2 Header Component Change of dynamic change according to state

Question

I have a project using angular 2 where the title component, the navigation bar component and the body component where all the other components are loaded. As the picture below

• Headline
• Navigation
• Where other components are downloaded (this section may have nested / child components)

So basically, in the header component, I want to show the current state . And at the bottom of the current state, I want to show the previous state of the user.

Questions: To implement this, I used the component interaction technique in angular.

• after restarting the application, the default value for the current and
  reverse conditions.

• In a scenario, for example, when a user lands directly on a specific page, which is a child component in the body, the default value for the current and back states is also displayed.

Since angular follows component architecture, I want to better implement this function.

If I come directly to the child component in section 3 in the figure, my header component should get the title / current state according to the specific page in the header component.

My solution for this was in every component when ngOnInit passed the current state value. I also analyze the previous state value. Therefore, the header component shows this as it is, since the service is written using the technique in this link - https://angular.io/docs/ts/latest/cookbook/component-communication.html

But there are some cases when I get data from the server and need to update the current status of the header. There I see that this is not displayed at all.

Need help with a good solution.

PS - Since this mechanism is in different view files, and it is a bit complicated, I helplessly update the code template

Answer 1

Although it looks simple, it can be achieved using child components and input, output variables.

Child component for displaying content from a service

@Component({ selector: 'title', template: ` <div> {{title}}</div> `, }) export class TitleComponent implements ngOnChanges{ @Input() title:string=""; @Output() titleChanged:EventEmitter<string>=new EventEmitter<string>(); constructor(){ //service call goes here } ngOnChanges(){ console.log(this.val); this.titleChanged.emit(this.title); } } 

The parent component will look like

 @Component({ selector: 'my-app', template: ` <div> <h2>Hello {{name}}</h2> <title (titleChanged)="changedTitle($event)" [title]="title"></title> </div> `, }) export class App { name:string; title:string="some title"; val:string; constructor() { this.val=""; } changedTitle(va;){ this.title="val" console.log(val); } } 

Explanation:

• When a service call is made and the header value changes.
• When you change the input property, ngOnChanges starts automatically.
• titleChanged is an Output () variable and emits a value when ngOnChanges is executed.
• When titleChanged is started, the corresponding method in changedTitle () will be executed.

Live demo

Note. To show that this works, I used a text box and assigned it to a div element, you can change it in the constructor of the routed component.