Angular AfterRender Hook

after-render-hook.component.ts

@Component({
  selector: 'my-cmp',
  template: `
    <span #content>{{ ... }}</span>
    <span #tooltip>{{ ... }}</span>
  `,
})
export class MyComponent {
  @ViewChild('content') contentRef: ElementRef;
  @ViewChild('tooltip') tooltipRef: ElementRef;


  constructor() {
    afterRender(() => {
      const { top, left } = this.contentRef.nativeElement.getBoundingClientRect();
      this.tooltipRef.nativeElement.style.top = top;
      this.tooltipRef.nativeElement.style.left = left;
    }, { phase: AfterRenderPhase.Read });
  }
}