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