Вы можете переместить стиль в шаблон и дать ему динамическое значение. Метод calculateLeft
вызывается только тогда, когда действительный #tooltip
находится в DOM.
Также обратите внимание, что в этом случае нет необходимости в ViewChild
или Renderer2
:
import {Component} from '@angular/core';
@Component({
...
})
export class AComponent {
show: boolean;
lastOffsetX: number;
public methodA(e: MouseEvent): void {
this.show = true;
this.lastOffsetX = e.offsetX;
}
public calculateLeft(tooltip) {
return (this.lastOffsetX - tooltip.offsetWidth) + 'px';
}
}
И HTML:
<ng-container *ngIf="show">
<div #tooltip [ngStyle]="{left: calculateLeft(tooltip)}">
Hello
</div>
</ng-container>
<button (click)="methodA($event)">Click me</button>