title: Dynamically loading child components in Angular 5
body: <p>I want to dynamically load the child components in angular. Parent component will load the child components based on some conditions. </p>
  
  <p>Is it possible that we define the child component names in parent component typescript file and in HTML we use string interpolation to load the component?</p>
  
  <p>For example in parent component typescript:</p>
  
  <pre><code>componentName = someCondition ? 'component1' : 'component2';
  </code></pre>
  
  <p>And in HTML</p>
  
  <pre><code>&lt;app-{{componentName}}&gt;&lt;/app-{{componentName}}
  </code></pre>
  
  <p>I tried this but it's not working. Would appreciate any help on this!</p>