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'
  }
}