title: How to add interpolation properly on a print component in Angular 2?
body: <p>When including the *ngFor on my template the invoice gets blank on print.
  Also, the interpolation did not work on it.I am getting data from an another component.When i debug the data is receiving properly.I initialized another property in the constructor called name and it got working.</p>
  
  <pre><code>constructor (){
  this.printData = {};
  this.printData.name = 'User';
  } 
  </code></pre>
  
  <p>But i am unable to show data from other sources.Is this any problem related to innerHtml or something?</p>
  
  <h3>invoice.component.ts</h3>
  
  <pre><code>import { Component } from '@angular/core';
  
  @Component({
    moduleId: module.id,
    selector: 'app-invoice',
    templateUrl: './invoice.component.html',
    styleUrls: ['./invoice.component.css']
  })
  export class InvoiceComponent  {
    printData:any;
    constructor() {
      this.printData = {};
    }
    print(data:any): void {         //Getting data from another component.
      console.log('Print Invoice');
      if(data) {
        let stringified = JSON.stringify(data);
        this.printData = JSON.parse(stringified);
        console.log('Data loaded to print');
    }
        this.startPrint('printSectionId');
  
  }
    startPrint(printSectionId: string){
            let popupWinindow;
            let innerContents = document.getElementById(printSectionId).innerHTML;
            popupWinindow = window.open('', '_blank', 'width=600,height=700,scrollbars=no,menubar=no,toolbar=no,location=no,status=no,titlebar=no');
            popupWinindow.document.open();
            popupWinindow.document.write('&lt;html&gt;&lt;head&gt;&lt;link rel="stylesheet" type="text/css" href="style.css" /&gt;&lt;/head&gt;&lt;body onload="window.print()"&gt;' + innerContents + '&lt;/html&gt;');
            popupWinindow.document.close();
      }
  
  }
  </code></pre>
  
  <h3>invoice.component.html</h3>
  
  <pre><code>  &lt;div id="printSectionId" &gt;
        &lt;div  *ngFor="let item of printData.items"  &gt;
  
    &lt;pre style="line-height:0.5; text-align: justify;  text-justify: inter-word;"&gt;
        &lt;div style="text-align: center"&gt;&lt;b&gt;&lt;h3&gt;Company Name&lt;/h3&gt;&lt;/b&gt;&lt;/div &gt;
        &lt;div style="text-align: center"&gt;Caption&lt;/div &gt;
        &lt;div style="text-align: center"&gt;Address&lt;/div &gt;
  
        &lt;hr&gt;
        &lt;div style="text-align: center"&gt;&lt;b&gt;Invoice&lt;/b&gt;&lt;/div &gt;
        &lt;br&gt;
        Serial No: {{printData.serialNo}}         Date:{{printData.date}}
  
        Item name: {{item.name}}
        Quantity: {{item.quantity}}
  
    &lt;/pre&gt;
       &lt;/div&gt;
  
    &lt;/div&gt;
  </code></pre>