Angular : Event in Header updates Child component with eventemitter/Observable

Question

Today, I trying to do something that seems to be simple, but I having a big headache with it...

I have an Angular APP (version 9), and in my header componenet I have a simples Select object (with ngFor, etc). When the value of this Select changes, I need to pass the new value to the routing component, that is loaded below.

I tried to do exactly what is suggested in this article:

[https://stackoverflow.com/questions/34376854/delegation-eventemitter-or-observable-in-angular/35568924#35568924]

But not success =/

My Service to handle the observable.. pass the value to childs:

@Injectable({providedIn: "root" })
export class FranchiseControlService {
    private _navItem = "0";
    navChange$: Observable<string>;
    private _observer: Observer<string>;
    constructor() {
        this.navChange$ = new Observable(observer =>
            this._observer = observer)
    }
  
     // Observable navItem source
     changeNav(number) {
        this._navItem = number;
        this._observer.next(number);
      }
      navItem() {
        return this._navItem;
      }
}

**Child Component: (needs to get the new value and execute something) **

ngOnInit(): void {
    this.itemF = this._franchiseControl.navItem(); 
    this.subscription = this._franchiseControl.navChange$.subscribe(item =>  this.selectedNavItem(item)); 
    }
  
selectedNavItem(item:any) {
  this.itemF = item;
  alert(this.itemF); 
}

Header (NAV) component, that update a value that i need to pass to child. I'm showing the Select component (Change) method that is fired when user change the selected item in dropdown:

changeFranchise(value) {
  this.selectedFranchise = value;
  if(this.selectedFranchise.toString() == "19")
    this.selectedFranchise = "0"; 
             
    this._franchiseControl.changeNav(this.selectedFranchise);
  }

Testing, I can see that the value is updated correctly in the FranchiseServieControl, using an alert in the "changeNav" method. The alert shows the value changed, but the child component never receives this value. I need receive this value in Child and execute some actions...

Where I wrong ? Someone could help, pleasee ?

Can you paste the component code? At least constructor and onInit of the component — huan feng, Jul 04 '20 at 11:44

huan feng · Answer 1 · 2020-07-04T11:48:44.980

Try use Subject:

    @Injectable({providedIn: "root" })
    export class FranchiseControlService {
        private _navItem = "0";
        navChange$: Observable<string>;
        private _observer = new Subject<string>();
        constructor() {
            this.navChange$ = this._observer.asObservable();
        }
    
        // Observable navItem source
        changeNav(number) {
            this._navItem = number;
            this._observer.next(number);
        }
        navItem() {
            return this._navItem;
        }
    }

score 0 · Answer 2 · answered Jul 04 '20 at 12:46

You can use behavioursubject like below one. It may trigger when you change the value in your service file.

@Injectable({providedIn: "root" })
export class FranchiseControlService {
   private _navItem = "0";
   private navChange$: BehaviourSubject<string> = new BehaviourSubject(null);

   // Observable navItem source
   changeNav(number) {
    this._navItem = number;
    return this.navChange$.next(number);
   }

   navItem() {
    return this._navItem;
   }
}

Angular : Event in Header updates Child component with eventemitter/Observable

2 Answers2