How to refresh html element after modifying element
<p>I have been trying to print after modifying html element but element has not been changed. (Angular2)
This source code is simplified one.</p>

<pre><code>&lt;div *ngIf="displayType === 'screen'"&gt;
       &lt;div&gt;This is Screen&lt;/div&gt;  
&lt;/div&gt;
&lt;div *ngIf="displayType === 'print'"&gt;
       &lt;div&gt;This is Print&lt;/div&gt;  
&lt;/div&gt;   
</code></pre>

<p>And when click a button the following event.</p>

<pre><code>    displayType: string = 'screen'; // default
    OnPrint() { 
           this.displayType = 'print'; 
           let tmp = document.createElement('div');
           let el = this.elementRef.nativeElement.cloneNode(true);   

           tmp.appendChild(el); 

           let content = tmp.innerHTML;
           let frame1 = document.createElement('iframe');
           document.body.appendChild(frame1); 
           let frameDoc = frame1.contentWindow;    
           frameDoc.document.open();
           frameDoc.document.write('&lt;html&gt;&lt;body&gt;'+content+'&lt;/body&gt;&lt;/html&gt;');
           frameDoc.document.close();

           setTimeout(function () {
               window.frames["frame1"].focus();
               window.frames["frame1"].print();
               document.body.removeChild(frame1);
           }, 500); 
  }
</code></pre>

<p>But contents are elements before modifying.
How can I refresh elements?</p>