Like document.getElementById("id") in javascript, what we can do in angular2 and above versions to get dom element in type script

Question

Like document.getElementById("id") in javascript, what we can do in angular2 and above versions to get dom element in type script?

I tried with angular.element but its not working

Answer 1

There are multiple ways to do that. I am going to show one of them.

1. You can use this.

   • document.querySelectorAll('.class-name')
   • document.querySelectorAll('#idname')
   • document.querySelectorAll('#tagname')

the working example is here

https://stackblitz.com/edit/angular-n8gau2

2. You can use @viewChild as well

Component.ts

import { Component, ViewChild, AfterViewInit, ElementRef } from '@angular/core';

import { HelloComponent } from './hello.component';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent implements AfterViewInit {
  name = 'Angular';


  @ViewChild('pRef', {static: false}) pRef: ElementRef;

    ngAfterViewInit() {
    console.log(this.pRef.nativeElement.innerHTML); 
    this.pRef.nativeElement.innerHTML = "DOM updated succesfully!!!"; 
  }
}

.html

<hello name="{{ name }}" ></hello>

<p #pRef>
  Start editing to see some magic happen :)
</p>

The working example is here

https://stackblitz.com/edit/angular-8-viewchild-example

You can find more info about ViewChild and it's usage here: https://angular.io/api/core/ViewChild

Answer 2

It is against Angular's guidelines to directly modify the DOM. Instead use ViewChild(ren)() selector and modify the element using the Renderer2 service.

Ex:

---

<div #myDiv> </div>

...
@ViewChild('myDiv',{static:true}) myDiv:ElementRef;

constructor(private renderer:Renderer2){
this.renderer.setStyle(this.myDiv.elementRef,'style','value');
}