Search code examples
angularngoninit

Angular: data details page does not get updated with the new product

I'm not a front-end developer so please ... When I click on another account, I notice that the Account details page does not get updated with the new Account. Why? it seems like the ngOnInit life cycle hook is not invoked when the user navigates to the component again.

I uploaded the app on Stackblitz : https://stackblitz.com/github/Georges73/Front-end-Nested-Route-3

enter image description here

Question: How the component will be notified, whenever the value of the parameter changes. So that I can update the component accordingly ?

Solution

  • Angular is more efficient than you realize and the component isn't reacting to the same URL being clicked again, even though some of the parameters have changed.

    What you need to do is subscribe to the events of the Router object and react to changes being emitting. This works in your code:

     this._router.events.subscribe(() => {
  this.getAccount();
})

    Add that to the ngOnInit() of account-detail.component.ts