How do we get hold of DOM elements in Angular (Version 2.x and above)? The basic functions like addClass, removeClass etc are not availble in typescript so how do we do these DOM manipulations in angular components? Please suggest if any. TIA
You can reach your DOM elements by using ViewChild decorator in this way:
@Component({
....
templateUrl: 'mytemplate.html'
})
export class MyComponent{
@ViewChild('selector') private someName;
constructor() {
//this is your dom
//this.someName.nativeElement
}
}
and in your template class you got to specify who is that selector
<div #selector> </div>
or you can use ElementRef class
import {Component, AfterViewInit,ElementRef} from "@angular/core";
export class MyComponent implements AfterViewInit {
constructor(protected elementRef: ElementRef) {
}
ngAfterViewInit() {
//you can reach your dom element by using
//this.elementRef.nativeElement
}
}
You are free to use 3th party libs like Jquery for addClass, removeClass within typescript.