Saltar al contenido

Cómo acceder a los nodos DOM en angularJun, 16thIn este tutorial, vamos a aprender acerca del acceso a los nodos DOM …

marzo 13, 2020

 

En esta guía, vamos a aprender acerca de acceder a los nodos DOM o HTML elementos presentes en el interior de los componentes angulares.

ViewChild

angular nos proporciona un método decorador ViewChild que nos ayuda a acceder a los nodos DOM particulares de los componentes.

Veamos un ejemplo.


Aquí hemos añadido una #myname referencia al elemento de entrada ahora está dentro de nuestro archivo de texto mecanografiado AppComponent podemos acceder al elemento de entrada utilizando myname.

import { Component, ViewChild, ElementRef } from '@angular/core';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})

export class AppComponent {

@ViewChild('myname') nameInput: ElementRef;
handleFocus() {
this.nameInput.nativeElement.focus(); }

resetName() {
this.nameInput.nativeElement.value = ''; }

}

En el código anterior, primero, hemos importado ViewChild decorador y tipo RefElement de @ angular / método núcleo package.ViewChild decorador acepta un nodo DOM como primer argumento de modo que pasamos myname que es el mismo nombre que definimos aplicación dentro de .component.html.

Hemos creado dos métodos handleFocus y resetName que nos ayuda a centrar el elemento de entrada y restablecer los datos anteriores.

¿Usted ha visto en la imagen de arriba nos estamos enfocando el elemento de entrada haciendo clic en un botón de enfoque y restaurar el nombre haciendo clic en un namebutton reinicio.