title: Dynamically append component to div in Angular 5
body: <p>I have this</p>
  
  <p><a href="https://angular-dynamic-component-append.stackblitz.io/" rel="noreferrer">https://angular-dynamic-component-append.stackblitz.io/</a></p>
  
  <p>I managed to dynamically append an element, but it doesn't get compiled.
  I saw many tutorials like <a href="https://medium.com/front-end-hacking/dynamically-add-components-to-the-dom-with-angular-71b0cb535286" rel="noreferrer">this</a></p>
  
  <p>But it's not really what I need. And often they use the hashtag notation to identify the container.</p>
  
  <p>I need to append a component to any element which may have
  my custom directive on it.</p>
  
  <p>I'd also need to use the bind value of the directive to control a [hidden] attribute on the appended element.</p>
  
  <p><strong>THE GOALS</strong></p>
  
  <ol>
  <li>Override behaviour of existing component:
  
  <ul>
  <li>adding an attribute to show/hide</li>
  <li>adding a class to customize appearance</li>
  </ul></li>
  <li>Reduce html coding
  
  <ul>
  <li>No need to write the entire component <code>&lt;my-comp&gt;&lt;/mycomp&gt;</code></li>
  <li>No need to know the class</li>
  <li>Automatic behaviour if the class name is changed
  
  <ol start="3">
  <li>Changing the element on which the directive is applied</li>
  </ol></li>
  <li>The final goal will be to add a class to the contaner element</li>
  </ul></li>
  </ol>
  
  <p><strong>Expected source</strong></p>
  
  <pre><code>&lt;div [myDirective]="myBoolean"&gt;
      &lt;p&gt;some content&lt;/p&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p><strong>Expected compiled</strong></p>
  
  <pre><code>&lt;div [myDirective]="myBoolean" class="myDirectiveClass1"&gt;
      &lt;p&gt;some content&lt;/p&gt;
       &lt;someComponent [hidden]="myBoolean" class="myDirectiveClass2"&gt;&lt;/someComponent&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>Is there a way to achieve this?</p>
  
  <p>Thank you in advance</p>