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.

Why not use getElementById? – Suren Srapyan Jan 12 '18 at 13:05 — Suren Srapyan, Jan 12 '18 at 13:05
Just wondering it there is an angular way to get elements. – Nino Gutierrez Jan 12 '18 at 13:25 — Nino Gutierrez, Jan 12 '18 at 13:25

Alexandre Annic · Accepted Answer · 2018-09-26T15:58:37.467

223

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.

edited Sep 26 '18 at 15:58

answered Jan 12 '18 at 13:09

Alexandre Annic

9,942
5
36
50

Error shows up Error: Can't resolve '@angular/core/src/metadata/di' Error: Can't resolve '@angular/core/src/linker/element_ref' – Nino Gutierrez Jan 12 '18 at 13:36
2

nvm, solved by importing like this. import { Component, OnInit,ViewChild,ElementRef } from '@angular/core'; – Nino Gutierrez Jan 12 '18 at 13:42
41

it won't work if you have conditional dom element like *ngFor, *ngIf etc – Ravindra Thorat Oct 22 '18 at 05:54
Angular 8+ requires *two* arguments to the ViewChild decorator. – Sep 08 '19 at 16:43
2

@RavindraThorat In Angular 8+, you can supply `{static: false}` as the second argument to the ViewChild decorator and whenever the item gets visible, your reference will point to it. – Muhammad bin Yusrat Sep 16 '20 at 13:46
How to do that with Reactive forms/Dynamic form controls without template ref? – Jayapal Chandran Aug 01 '21 at 17:15
With newer TS Version you need to either disable strict mode or set `myDiv` as potentially `undefined`: `@ViewChild('myDiv') myDiv: ElementRef | undefined`; – Jonathan Aug 05 '21 at 07:04

score 121 · Answer 2 · edited Feb 18 '22 at 21:05

121

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.

edited Feb 18 '22 at 21:05

Soheil

1,201
2
11
18

answered Jan 12 '18 at 13:06

Suren Srapyan

66,568
14
114
112

2

Why should I inject the document object and not use directly that provided by javascript? – Davide Dec 14 '20 at 23:56
3

@Davide we rely on the system of Angular. Later they can implement very good things and do some checking in their implementation. So we just rely on the abstraction here – Suren Srapyan Dec 15 '20 at 07:11

Gustavo Santamaría · Answer 3 · 2021-03-29T15:35:30.720

39

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)

edited Mar 29 '21 at 15:35

answered Jul 08 '19 at 01:54

Gustavo Santamaría

837
1
10
21

1

It works when you dynamically hide or show elements using `*ngIf`. How are you creating the element? – Gustavo Santamaría Apr 06 '20 at 17:01
2

Thank you for supplying updated syntax. It's worth noting that you still can't just grab any HTML element by tag name with `@ViewChild('myDiv'...` in Angular 8. You can only grab an element in the component's markup tagged with a template variable, e. g. `#mydiv`. I almost missed that your answer contained the variable tag on the element. – jcairney Jul 29 '21 at 22:05

Swati · Answer 4 · 2020-03-05T10:15:52.640

15

Try this:

TypeScript file code:

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

HTML code:

 <input id="name" type="text" #name />

edited Mar 05 '20 at 10:15

answered Mar 05 '20 at 10:07

Swati

234
2
10

5

Please describe what 'name' attribute or value you are referring to with getElementById("name") because it could be either the id or the #name – Joniras Mar 08 '21 at 14:15

score 10 · Answer 5 · answered Aug 22 '18 at 22:58

10

  element: HTMLElement;

  constructor() {}

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

answered Aug 22 '18 at 22:58

Cesar Devesa

990
6
14

5

This is very unsafe (running this command in Angular Universal causes a crash) and should only be used if no other option is possible (also consider that the element may not be present) – Joniras Feb 05 '19 at 17:33
8

M@Joniras why is it very unsafe? – Sumi Straessle Apr 06 '20 at 18:03
Because you are manipulating/accessing directly the native DOM. It is recommended that you access HTML elements using Angular's DOM API (for example ViewChild, Renderer2 or ElementRef), as they are designed to ensure consistency, security, and maintainability. Touching directly the native DOM with document.getElementById bypasses this security and can lead to several issues. Check: https://dev.to/imsabodetocode/dom-manipulations-in-angular-1dh1 – victorperezpiqueras Jun 01 '23 at 09:22

document.getElementById replacement in angular4 / typescript?

5 Answers5

Linked

Related