title: How to refresh html element after modifying element
body: <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>