So, im working with angular4 in my practice work and this is new for me.
Luckyly, in order to get html elements and its values i used
<HTMLInputElement> document.getElementById
or
<HTMLSelectElement> document.getElementById
Im wondering if there is any replacement for this in angular
This question is related to
angular
typescript
element: HTMLElement;
constructor() {}
fakeClick(){
this.element = document.getElementById('ButtonX') as HTMLElement;
this.element.click();
}
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.getElementById('el');
}
}
Or if the element you want to get is in that component, you can use template references.
Try this:
TypeScript file code:
(<HTMLInputElement>document.getElementById("name")).value
HTML code:
<input id="name" type="text" #name />
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:
// ...
@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)
Source: Stackoverflow.com