rxjs observable in angular

Question

I have a confusion about the observable in rxjs Is it follow the observer design pattern? if so, Should its subscriber get notified of the latest value or any change?

Let me show you an example.

this is my user service

    login(userData): Observable<any> {
    return this.http.post(this.APIURL,userData).pipe(
      map((user: any) => user.firstName),
      tap((name) => {
        localStorage.setItem('userName', name);
        localStorage.setItem('isLogin', 'true');
      })
      );
    }
   private nameObservable:Observable<string>=new Observable<string>(observer=>{
      observer.next(localStorage.getItem("userName"))
    })
    getName(): Observable<string> {
      return this.nameObservable;
    }
    logout() {
      localStorage.removeItem("userName");
      localStorage.removeItem("isLogin");
    }

this is my header component

    ngOnInit() {
   this.isLogin=!!localStorage.getItem("isLogin")
    this.userService.getName()
    .subscribe((userName)=>{
         this.name=userName
       })
   }

and login button call that login function

the issue is my header doesn't get notified when I hit the login button it needs to be reloaded. I know I should use Subject or behaviorSubject instead of observable but my question again is:

• -Is it follows the observer design pattern? if so, Should its subscriber get notified of the latest value or any change?
  • if yes, Does my header didn't get the changes in the observable because it should call the ngOnInit function to get the value in localStorage after changes?
  • if not, I shouldn't use it to keep track of changes in some value. It's for async handling only?
  • What about ParamMap in the ActivatedRoute? it's observable and if I change a param in the URL with some button on the page then subscribe to ParamMap and catch that param in ngOnInit(), it gets the value changed with every click!! or it's something built in?

Answer 1

There appears to be a typo. You are setting an item on key username but then asking for userName try fixing that. A little bit clunky with the manual subscribe(), but it should work. Remember to unsubscribe as well.