Tengo un componente angular con html que incluye lo siguiente para colocar las etiquetas correctamente:

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

Esto funciona correctamente para configurar las posiciones x e y en la pantalla.

En el componente principal tengo 2 botones para imprimir:

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

Y en el javascript tengo la siguiente función

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

Descubrí que cuando hago clic en printButton2, que tiene el comando window.print() insertado directamente en el html, los valores css [style.left] y [style.top] se calculan para la impresión y la etiqueta está en el lugar correcto. posición en la vista previa de impresión. La depuración muestra que se llama a calcXPos y calcYPos.

Sin embargo, cuando uso printButton1, los valores css [style.left] y [style.top] no se calculan porque nunca se llama a calcXPos y calcYPos. Esto es a pesar del hecho de que window.print() todavía se usa (solo se llama desde javascript)

¿Alguien sabe por qué los cálculos de estilo angular solo se activan para medios impresos si llamo a window.print() directamente desde el html?

¿Cuál es la mejor manera de resolver esto para asegurarse de que calcXPos y calcYPos se activen incluso cuando se llama a window.print() desde javascript?