- Published on
Reference Dom Elements in Angular
- Authors
- Name
- Ryan Jordan
- @ryanjordandev
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'
}
}