In rare cases when you need to access DOM element directly, you can get it by requiring ElementRef in your construtor.
@Directive({selector: '[tooltip]'})
export class TooltipDirective implements OnInit, OnDestroy {
private readonly tooltip: Tooltip;
constructor(
private elementRef: ElementRef<HTMLElement>,
) { }
}Note: Try avoiding direct DOM manipulation except the cases when it’s the only option, such as interaction with 3rd party libraries.
file:app.component.ts
import { Component } from '@angular/core';
import { Attribute, Directive, ElementRef, OnInit, OnDestroy, HostListener } from '@angular/core';
import Tooltip from 'https://unpkg.com/popper.js';
@Directive({
selector: '[tooltip]'
})
export class TooltipDirective implements OnInit, OnDestroy {
private tooltip: Tooltip;
constructor(
private elementRef: ElementRef<HTMLElement>,
@Attribute('title') private text: string
) { }
ngOnInit() {
const content = document.createElement('div');
content.innerText = this.text;
this.tooltip = new Tooltip(this.elementRef.nativeElement, content);
}
ngOnDestroy() {
if (this.tooltip) {
document.body.removeChild(this.tooltip.popper);
this.tooltip.dispose();
}
}
@HostListener('mouseover')
over() {
document.body.appendChild(this.tooltip.popper);
}
@HostListener('mouseout')
out() {
document.body.removeChild(this.tooltip.popper);
}
}
@Component({
selector: 'my-app',
template: `<h1 tooltip title="Tooltip content">Hover me</h1>`
})
export class AppComponent {}file:app.module.ts
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppComponent, TooltipDirective } from './app.component';
@NgModule({
imports: [BrowserModule],
declarations: [AppComponent, TooltipDirective],
bootstrap: [AppComponent]
})
export class AppModule {}翻译自：https://www.30secondsofcode.org/angular/s/access-dom-element
