How to reload the header component when the variable value changes via service?

Question

I need to display the title of the routing component in the header. But when I am using ngOnInit in my app, it is getting the default value. It is not changing even after the variable value is changed via service. How to do that?

Data.service.ts

import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';

@Injectable()

export class DataService {

  public myGlobalVar : string = "Chaitanya";

  constructor() { }

  setMyGV(val : string){
    this.myGlobalVar = val;
    console.log(this.myGlobalVar);
  }

  getMyGV(){
    return this.myGlobalVar;
  }
}

header.component.ts

    import { Component, OnInit } from '@angular/core';
    import { DataService } from 'src/app/data.service';

    @Component({
      selector: 'app-header',
      templateUrl: './header.component.html',
      styleUrls: ['./header.component.scss']
    })
    export class HeaderComponent implements OnInit {

      public title : string = '';

      constructor(private _emp : DataService) { }

      ngOnInit() {
        this.title = this._emp.getMyGV();    
      }
}

contact.component.ts

import { Component, OnInit } from '@angular/core';
import { DataService } from 'src/app/data.service';

@Component({
  selector: 'app-contact',
  templateUrl: './contact.component.html',
  styleUrls: ['./contact.component.scss']
})
export class ContactComponent implements OnInit {

  constructor(private _emp : DataService) { }

  ngOnInit() {
      this._emp.setMyGV('Contact');
      }
}

Before : After :

header component is already loaded right, so how it detect a change in title. make `_emp` public in header component and use as `_emp.myGlobalVar` in html. — ashish pal, Feb 01 '19 at 09:37
Try to use onChanges in your header component. I think it will work. — André Pacheco, Feb 01 '19 at 09:40

Shashank Vivek · Accepted Answer · 2019-04-12T10:11:47.397

Try with BehaviorSubject and NOT just Subject

service.ts

import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { BehaviorSubject } from 'rxjs';

@Injectable()

export class DataService {

  public myGlobalVar$ = new BehaviorSubject<string>("Chaitanya");

  constructor() { }

  setMyGV(val : string){
    this.myGlobalVar.next(val);
  }

  getMyGV(){
    return this.myGlobalVar$.asObservable();
  }
}

in header.component

import { Component, OnInit } from '@angular/core';
import { DataService } from 'src/app/data.service';
import { Observable } from 'rxjs';

@Component({
  selector: 'app-header',
  templateUrl: './header.component.html',
  styleUrls: ['./header.component.scss']
})
export class HeaderComponent implements OnInit {

  public title : Observable<string>;

  constructor(private _emp : DataService) { }

  ngOnInit() {
    this.title = this._emp.getMyGV();    
  }

}

in html:

{{ title | async}}

@firegloves : https://stackoverflow.com/questions/43348463/what-is-the-difference-between-subject-and-behaviorsubject . Most of the time, we lose data because of using `Subject` rather than using `BehaviorSubject` and then we spend more time finding the bug. :) — Shashank Vivek, Feb 02 '19 at 05:26

score 0 · Answer 2 · answered Feb 26 '20 at 07:17

0

We can directly use service variable in header component and it works.

{{ dataService.myGlobalVar }}

Also no need to of getter and setter since its public variable, we can directly uses it.

answered Feb 26 '20 at 07:17

user2900572

571
1
8
21

How to reload the header component when the variable value changes via service?

2 Answers2