angular – document.getElementById replacement in angular4 / typescript?

angular – document.getElementById replacement in angular4 / typescript?

You can tag your DOM element using #someTag, then get it with @ViewChild(someTag).

See complete example:

import {AfterViewInit, Component, ElementRef, ViewChild} from @angular/core;

@Component({
    selector: app,
    template: `
        <div #myDiv>Some text</div>
    `,
})
export class AppComponent implements AfterViewInit {
    @ViewChild(myDiv) myDiv: ElementRef;

    ngAfterViewInit() {
        console.log(this.myDiv.nativeElement.innerHTML);
    }
}

console.log will print Some text.

You can just inject the DOCUMENT token into the constructor and use the same functions on it

import { Inject }  from @angular/core;
import { DOCUMENT } from @angular/common; 

@Component({...})
export class AppCmp {
   constructor(@Inject(DOCUMENT) document) {
      document.getElementById(el);
   }
}

Or if the element you want to get is in that component, you can use template references.

angular – document.getElementById replacement in angular4 / typescript?

For Angular 8 or posterior @ViewChild have an additional parameter called opts, which have two properties: read and static, read is optional. You can use it like so:

import { ElementRef, ViewChild } from @angular/core;
// ...
@ViewChild(mydiv, { static: false }) public mydiv: ElementRef;

constructor() {
// ...

<div #mydiv></div>

NOTE: Static: false is not required anymore in Angular 9. (just { static: true } when you are going to use that variable inside ngOnInit)