Búsqueda de elementos por nombre de clase en Angular

Presentaremos ElementRef y cómo usarlo para encontrar elementos por nombre de clase en Angular.

Usando el ElementRef para encontrar la clase por nombre en Angular

ElementRef es un envoltorio de objeto de elemento DOM nativo que contiene la propiedad nativeElement. Contiene la referencia al elemento DOM y lo usa para manipular el DOM.

Se usa con ViewChild para obtener el elemento HTML de la clase del componente. Veamos un ejemplo para entender el uso del objeto ElementRef.

Cree una nueva aplicación en Angular usando el siguiente comando.

# angular
ng new my-app

Después de crear la aplicación, vaya al directorio de la aplicación usando este comando.

# angular
cd my-app

Ejecutemos nuestra aplicación para verificar si todas las dependencias están instaladas correctamente.

# angular
ng serve --open

En primer lugar, debemos importar ViewChild, ElementRef junto con Component y AfterViewInit desde @angular/core en el archivo app.component.ts.

Después de importarlos a nuestra clase, crea un ElByClassName privado en el constructor y una función ngAfterViewInit que guardará el elemento que obtengamos por nombre de clase usando <HTMLElement>.

Una vez que tenemos el elemento que queríamos, ahora podemos cambiar el nombre del botón usando innerHTML. Nuestro código en app.component.ts se verá a continuación.

# angular
import { Component, ElementRef, ViewChild } from '@angular/core';
@Component({
selector: 'my-app',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css'],
})
export class AppComponent {
name = 'Angular';
constructor(private ElByClassName: ElementRef) {}
ngAfterViewInit() {
const btnElement = (<HTMLElement>this.ElByClassName.nativeElement).querySelector(
'.myButton'
);
btnElement.innerHTML = 'This is Button';
}
}

Necesitamos crear una plantilla de botón en app.component.html con la clase myButton.

# angular
<button class="myButton">My Button</button>

Producción:

Usando estos simples pasos, podemos manipular cualquier elemento DOM usando su ElementRef.

Si queremos reemplazar el elemento en lugar de simplemente cambiar el nombre del botón, podemos usar outerHTML.

En ngAfterViewInit(), escriba el siguiente código para reemplazar el botón con un encabezado.

# Angular
btnElement.outerHTML = '<h1>This is Heading</h1>';

Producción: