document.getElementById replacement in angular4 / typescript?

Question

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.

Answer 1

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.

Answer 2

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.