I have an angular component with html which includes the following for positioning labels correctly:

<div *ngFor="let label of labels"
class="text"
[style.left]="calcXPos(label.text.position.x) + 'px'"
[style.top]="calcYPos(label.text.position.y) + 'px'"
...>

This works correctly for setting the x and y positions on the screen.

In the parent component I have 2 buttons for printing:

<button id="printButton1"
    (click)="printChartWithLabels()">
    Print Label from Code
</button>
<button id="printButton2"
    onclick="window.print()">
    Print Chart direct from HTML
</button>

And in the javascript I have the following function

public printChartWithLabels(): void {
  window.print();
}

I have found that when I click printButton2 which has the window.print() command inserted directly in the html, then the [style.left] and [style.top] css values get calculated for the print and the label is in the correct position in the print preview. Debugging shows that calcXPos and calcYPos get called.

However when I use printButton1, then [style.left] and [style.top] css values do not get calculated because calcXPos and calcYPos never get called. This is despite the fact that window.print() is still being used (just being called from the javascript)

Does anyone know why the Angular style calculations only fire for print media if I call window.print() directly from the html?

What is the best way for resolving this to make sure calcXPos and calcYPos are fired even when calling window.print() from the javascript?