Fetching data from server doesn't trigger change detection in child component [duplicate]

Question

I'm working on some app where there is an object that has some properties and when I make a http request new properties are added to that object.

    this.user = {
      id: 1,
      name: 'John'
    }

    this.http.get('https://api.chucknorris.io/jokes/random')
      .subscribe(joke => this.user.joke = joke);

The problem is that change detection isn't performed when making the request (this article states that it should be performed as long as I'm not modifying the change detection strategy).

Thus, ngOnChanges isn't called in the child component where I passed the user object and where I'm doing some complicated stuff when the value arrives from the server.

I attached a simplified stackblitz demo.

Note: I know that I can pass a copy of that object when the new data arrives, but I think it should be a better approach.

@AJT_82 good answer. Maybe add a sentence explaining why the code is correct? — Keenan Diggs
– Keenan Diggs, Commented Jul 22, 2019 at 8:18
@AJT_82 Please don't mark my question as duplicate until you tell me why it's so. I've gave you a reference to an article that states that the answer to the "duplicated" question is not correct, unless you change the change detection strategy to OnPush. If I misunderstood the article please let me know. Btw, I was also taking about the change detection strategy in my question, so I think this is another reason to do not mark the question as duplicate — Mateut Alin
– Mateut Alin, Commented Jul 22, 2019 at 9:07
Like the duplicate states: If you modify the content of an object, Angular won't recognize. This is just a fact. If you were to use a primitive value, the change detection would pick up on that, but here we are dealing with an object and angular won't pick up the change unless the reference changes. Same would be, if this was an array and you would modify one object in the array, angular would not pick up on that. — AVJT82
– AVJT82, Commented Jul 22, 2019 at 10:28
@AJT_82 I read the question and I understand this. But this article says that whenever some asynchronous operation has been performed, our application state might have changed. So there must be someone wrong (the guy that answered the stackoverflow question OR the guy that wrote the article). IMO, the guy that wrote the stackoverflow question is wrong, so I can't believe that If you modify the content of an object, Angular won't recognize. Please give me an official refecence. — Mateut Alin
– Mateut Alin, Commented Jul 22, 2019 at 11:51

cnps · Accepted Answer · 2019-07-22 08:38:34Z

-1

Angular change detection doesn't fire unless it detects a new reference.

If you overwrite existing user, with it self and the new prop, angular will detect a new reference and update.

 this.http.get('https://api.chucknorris.io/jokes/random')
      .subscribe(joke => this.user = {...this.user, joke};

answered Jul 22, 2019 at 8:38

cnps

15111 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

cnps Over a year ago

why the downvote?

Mateut Alin Over a year ago

because I've already mentioned "Note: I know that I can pass a copy of that object when the new data arrives, but I think it should be a better approach". And even so, @AJT_82 already gave me this answer

cnps Over a year ago

@MTZ Okay, I honestly didn't notice that. I still think it's the best approach, unless you really need the same reference. Have you tried with changeDetectorRef?

Mateut Alin Over a year ago

Yes. I've tried.

Collectives™ on Stack Overflow

Fetching data from server doesn't trigger change detection in child component [duplicate]

1 Answer 1

4 Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Linked

Related