title: How to safely load/initialize the same child components repeatedly
body: <p>This is an architectural question related to Angular 4 and how best to initialize data given how angular loads child components. </p>
  
  <p>Scenario:
  I have a parent component with a data table and when any row in the table is clicked it opens one of 3 child components (in a sidebar view) depending on whether you want add a new item to the table, edit the selected row, or view details about it (basic CRUD functionality). IOTW, the user may invoke the same 3 components repeatedly as they work with data table in parent component.</p>
  
  <p>By design in angular, the child components only run OnInit lifecycle events the first time the component is utilized. So for example, if if i edit row 1, the 'edit' child component runs it's onInit hook, however, if I subsequently edit row 2, onInit in the edit component won't run, since that component has already loaded according to angular.</p>
  
  <p>In order to be able to initialize the data in the child components <em>each and every time</em> the user wants to do something like edit a newly selected row (parent data table operation), I'm using onChanges lifecycle hook in the child component. </p>
  
  <p>The problem:
  I suspect this approach of initializing data via onChanges is an anti-pattern since onChanges runs repeatedly in the child components, forcing me to be wary on what initialization code I can put in there.</p>
  
  <p>Question:
  Is there a better way to load the child components that will allow me to reliably initialize them <em>only once</em> each and every time they are triggered by the parent component?</p>
  
  <p>Thank you,</p>
  
  <p>S. Arora</p>