@Viewchild Angular 5, 6 - ElementRef

Question

@Viewchild Angular 5, 6 - ElementRef

Navigation

#1 by (0 votes)
#2 by (0 votes)

1

I am referencing a control using ElementRef and for this I use the following:

 @ViewChild('btnGuardarDatosGenerales') btnGuardarDatosGenerales: ElementRef;

I need the reference to be able to reach your click () event, with javascript I can achieve doing it:

let buttonDG: any = document.getElementsByName('btnGuardarDG')[0];
buttonDG.click();

but when doing it with ElementRef I do not get it:

this.btnGuardarDatosGenerales.nativeElement.click();

... I could do it with javascript but it's not the idea. Any suggestions, in which I can be wrong?

Thank you.

javascript angular viewchild elementref

asked by configbug 08.08.2018 в 21:37

source

2 answers

Modify attributes of HTML elements dynamically created with JavaScript How do I store data without being repeated, and how to add data in a form.

score 0 · Answer 1

The code that I will put below would simulate a click on the element you need. Obviously you would have to run it from the (click) of the parent button that you mentioned or from somewhere else. If you are really in the parent component this should work.

@ViewChild('btnGuardarDatosGenerales') btnGuardarDatosGenerales: ElementRef;

simularClick() {
    let boton: HTMLElement = this.btnGuardarDatosGenerales.nativeElement as HTMLElement;
    boton.click();
}

I hope you serve, greetings.

score 0 · Answer 2

Make sure you are using the button reference after AfterViewInit . Also use the identifier btnGuardarDatosGenerales has to be in the mode button:

<button #btnGuardarDatosGenerales ...> ...</botton>

That way the @ViewChild('btnGuardarDatosGenerales') will have access to it.

I leave you a Functional Stackblitz .