document.getElementById replacement in angular4 / typescript?

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.

5 Answers

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) { document.getElementById('el'); } } 

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

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)

Try this:

TypeScript file code:

(<HTMLInputElement>document.getElementById("name")).value

HTML code:

 <input type="text" #name /> 

 element: HTMLElement; constructor() {} fakeClick(){ this.element = document.getElementById('ButtonX') as HTMLElement; this.element.click(); }