document.getElementById replacement in angular4 / typescript?
AngularTypescriptAngular Problem Overview
I'm working with angular4 in my practice work, and this is new for me.
In order to get HTML elements and their values, I used <HTMLInputElement> document.getElementById
or <HTMLSelectElement> document.getElementById
.
I'm wondering if there is any replacement for this in angular.
Angular Solutions
Solution 1 - Angular
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.
Solution 2 - Angular
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) {
document.getElementById('el');
}
}
Or if the element you want to get is in that component, you can use template references.
Solution 3 - Angular
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)
Solution 4 - Angular
Try this:
TypeScript file code:
(<HTMLInputElement>document.getElementById("name")).value
HTML code:
<input id="name" type="text" #name />
Solution 5 - Angular
element: HTMLElement;
constructor() {}
fakeClick(){
this.element = document.getElementById('ButtonX') as HTMLElement;
this.element.click();
}