Substituição de document.getElementById em angular4 / typescript?

Então, estou trabalhando com angular4 em meu trabalho prático e isso é novo para mim. Felizmente, para obter os elementos html e seus valores, usei <HTMLInputElement> document.getElementByIdou <HTMLSelectElement> document.getElementById

Estou me perguntando se há algum substituto para isso no angular

Você pode marcar seu elemento DOM usando e #someTag, em seguida, obtê-lo com @ViewChild('someTag').

Veja o exemplo completo:

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.logirá imprimir algum texto .

Você pode simplesmente injetar o token DOCUMENT no construtor e usar as mesmas funções nele

import { Inject }  from '@angular/core';
import { DOCUMENT } from '@angular/common'; 

@Component({...})
export class AppCmp {
   constructor(@Inject(DOCUMENT) document) {
      document.getElementById('el');
   }
}

Ou se o elemento que você deseja obter está nesse componente, você pode usar referências de modelo .

Para Angular 8 ou posterior @ViewChild tem um parâmetro adicional chamado opts, que tem duas propriedades: read e static, read é opcional. Você pode usá-lo assim:

// ...
@ViewChild('mydiv', { static: false }) public mydiv: ElementRef;

constructor() {
// ...

<div #mydiv></div>

NOTA: Static: false não é mais necessário no Angular 9. (apenas { static: true }quando você vai usar essa variável dentro de ngOnInit)

Experimente isto:

Código do arquivo TypeScript:

(<HTMLInputElement> document.getElementById ("nome")). Valor

Código HTML:

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

  element: HTMLElement;

  constructor() {}

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