angulartypescriptrxjsangular2-observablessubject-observer

Angular - Why ngOnInit is called every time i emit a new value?


I have a Subject called refreshSubject$ inside my service.

  private refreshUsers$ = new Subject<User[]>();

He is emitting a new value every time the user is added.

  saveUser(user: User[]) {
    return this.http.post<User>(this.url, user)
      .pipe(
        tap(() => {
          this.refreshUsers$.next();
        })
      );
  }

Im using a get method on my service to retrieve the value

  get refresh$() {
    return this.refreshUsers$;
  }

Now every time i add a new user, i emit a new value using the next() method.

  this.refreshUsers$.next();

Inside my component i have my life cycle hook ngOnInit that he is being called everytime the refreshUsers$ subject emits a new value.

  ngOnInit(): void {
    this.apiService.refresh$.subscribe(() => {
      this.getAllUsers();
    });
  }

Why ngOnInit is called every time i subscribe to a new value ?


Solution

  • Subscribe will get trigger every time an event is emitted does not matter where it sits. So your ngOnIt is not getting trigger every time an event is triggered but it's "subscribe", but since your's subscribe is inside "ngOnInIt" it will look like "ngOnInIt" is getting triggered. If you don't want this you can move out your subscribe outside ngOnInIt although it will not create a problem. Because other logic you have written inside ngOnInIt will not get triggered.

    If you want to check for yourself you can add a console.log("testing") inside your ngOnInit but outside of subscribe. And emmit multiple event our will notice that 'testing' will be logged only once(when component loads)