In an Angular 5 app I am building, I have a side menu and main content menu.
Two of the menu items on the left load the same component with different route data.
By default, Angular uses the same component instance to render both. Hence, the ngOnInit() will be called only once (one instance).
The component to render contains a child component (with the change-detection set to OnPush). The child component receives the data as @Input()
When the first menu item is clicked, data is rendered properly. When the second menu item is clicked, the old data is still showing and once the new data arrives from the server it is rendered.
The behavior mentioned is normal. There is no change yet in the data in the parent component and hence the child component @Input() were not changed, hence the ngOnChange() of the child component is not triggered.
When the data arrives from the server, the parent component will update its data and hence the child component @Input() will be updated accordingly and hence ngOnChange() will be triggered on the child component. As a result, Angular will update go for a UI rendering.
The goal here is when navigating to the same component, to reset the data beforehand, before even waiting for the new data to arrive.
How is that doable?
Thanks
