CODEWITHSUNDEEP
angular
Tanvir
Tanvir

Reputation: 151

How to change value on click?

How can I change the value on click so that it reflects on click?

@Component({
  selector: 'my-app',
  template: `
    <div>
      <div id="print-section">
        Test print {{ name }}
      </div>
      <button (click)="print()">print</button>
    </div>
  `,
})
export class App {
  name:string;

  name="Red";

  constructor() {
  }


  print(): void {
    let printContents, popupWin;

    this.name="Blue";

    printContents = document.getElementById('print-section').innerHTML;
    popupWin = window.open('', '_blank', 'top=0,left=0,height=700,width=1000');
    popupWin.document.open();
    popupWin.document.write(`
      <html>
        <head>
          <title>Print tab</title>
          <style>
          //........Customized style.......
          </style>
        </head>
    <body onload="window.print();window.close()">${printContents}</body>
      </html>`
    );
    popupWin.document.close();
}


}

Here I declared name="Red"; After clicking print It should be Blue. But it remains same in the first click. It changes in the second click

Here is the link:

https://plnkr.co/edit/tpl:AvJOMERrnz94ekVua0u5?p=preview

Upvotes: 0

Views: 72

Answers (1)

j2L4e
j2L4e

Reputation: 7050

this.name="Blue";

printContents = document.getElementById('print-section').innerHTML;

Your code runs synchronously, so the DOM isn't updated until your synchronous task is done.

You may be able to use 

this.name="Blue";

setTimeout(() => {
  printContents = document.getElementById('print-section').innerHTML;
  // ... rest of your iframe code
});

to make it work. It's not a solid design choice, though.

Upvotes: 2

Related Questions