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

Question

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 ?

score 3 · Answer 1 · answered Feb 29 '20 at 11:10

3

In the onInit you are subscribed to your subject so everytime you emit a new value the method "this.getAllUsers()" will be runned. It doesn't matter if you are subscribed in the OnInit. A subscribe is alive until you unsubscribe.

answered Feb 29 '20 at 11:10

Pauho

74
4

Ok, PauHo, i have understand. Thank you very much ! – Hugo Seleiro Feb 29 '20 at 11:15

score 2 · Accepted Answer · answered Feb 29 '20 at 11:21

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)

score 1 · Answer 3 · answered Feb 29 '20 at 11:06

1

It's not... the subscription callback is called everytime you emit a value, i.e., this part:

() => {
      this.getAllUsers();
}

But you are not making a new subscription every time you emit a value.

That's how observables work

answered Feb 29 '20 at 11:06

Jcl

27,696
5
61
92

Thanks for the answer Jlc, im trying to understand what i have done. Thanks for the help. – Hugo Seleiro Feb 29 '20 at 11:08

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

3 Answers3