Reference Dom Elements in Angular

Sometimes you need to reference a DOM element inside an angular template. We can do this with JavaScript using the document.getElementById('title');, however this is considered bad practice.

In Angular, there are three solutions that I’m aware of. The first is what I mentioned above and not recommended.

Bad

<h1 id="title">This is my title</h1>

...
export class AppComponent implements OnInit {
  ngOnInit(): void {
    const title = document.getElementById('title');
    title.style.color = 'pink';
  }
}

As you can see this changes the color of the h1 to pink. The second way is to inject the document into the component.

Better

import { Component, OnInit, Inject } from "@angular/core";
import { DOCUMENT } from "@angular/common";

@Component({
  selector: "app-root",
  templateUrl: "./app.component.html",
  styleUrls: ["./app.component.scss"],
})
export class AppComponent implements OnInit {
  constructor(@Inject(DOCUMENT) private _document: any) {}

  ngOnInit(): void {
    const title = this._document.getElementById("title");
    title.style.color = "blue";
  }
}

Best

Finally, the path I usually try to take using ViewChild.

<h1 #title>This is my title</h1>

import { Component, OnInit, ViewChild } from "@angular/core";

@Component({
  selector: "app-root",
  templateUrl: "./app.component.html",
  styleUrls: ["./app.component.scss"],
})
export class AppComponent implements OnInit {
  @ViewChild("title")
  title;

  ngOnInit(): void {
    this.title.nativeElement.style.color = "orange";
  }
}