title: Dynamically append data inside <div> angular6
body: <p>I have a template : 
  <code>&lt;div class='somedata'&gt;&lt;/div&gt;</code>
  I want to append a list of <code>&lt;div&gt;</code> dynamically one after the other . 
  Data i fetch using a shared service through a <code>Subject</code> .</p>
  
  <p>For Example : </p>
  
  <pre><code>&lt;div class='somedata'&gt;
  &lt;div id='dynamicdata1'&gt;some data&lt;/div&gt;
  &lt;div id='dynamicdata2'&gt;some data&lt;/div&gt;
  ..
  ..
  ..
  &lt;/div&gt;
  </code></pre>
  
  <p><code>dynamicdata1</code> , <code>dynamicdata2</code> etc arrive one after the other with some delay .</p>
  
  <p>Initially i thought of using an <code>ngFor</code> to render the <code>div</code>, but everytime i push a data into the <code>ngFor</code> bound variable , the loop runs again due to angular's <code>changeDetection</code> . </p>
  
  <p>Is there any way this can be solved without using <code>*ngFor</code> ?</p>
  
  <p>I know there is a way using jQuery where we can use <code>$(selector).append()</code> but is there anyway this can be done in angular?</p>
  
  <p>Thanks ,</p>