Angular template is not updated on beforePrint event

Question

I would like to update my template before print it. So I have used this event: @HostListener("window:beforeprint", ["$event"])

But the template is updated too late; after closing the print window.

I have tried the matchMedia event but same. I also tried to use NgZone but without success.

You can test here: https://stackblitz.com/edit/angular-window-before-print-event

/!\ The Stackblitz console is not the right. You need to open the DevTool console to see the right message at the right time

Do you have any suggestion ? Thanks for your help !

Answer 1

As stated on MDN :

The beforeprint event is fired when the associated document is about to be printed or previewed for printing.

So it happens when the preview is launched, not before it's launched.

You can move the logic inside your printme() function and use the ChangeDetectorRef to update your template :

constructor(private cdr: ChangeDetectorRef) {}

  public printMe(): void {
    this.message = "before print triggered ";
    this.cdr.detectChanges();
    window.print();
  }