Rechercher un élément par nom de classe dans Angular

Nous présenterons ElementRef et comment l’utiliser pour trouver des éléments par nom de classe dans Angular.

Utilisation de ElementRef pour rechercher une classe par nom dans Angular

ElementRef est un wrapper d’objet d’élément DOM natif contenant la propriété nativeElement. Il contient la référence à l’élément DOM et l’utilise pour manipuler le DOM.

Il est utilisé avec ViewChild pour obtenir l’élément HTML de la classe du composant. Passons en revue un exemple pour comprendre l’utilisation de l’objet ElementRef.

Créez une nouvelle application dans Angular en utilisant la commande suivante.

# angular
ng new my-app

Après avoir créé l’application, accédez au répertoire de l’application à l’aide de cette commande.

# angular
cd my-app

Exécutons notre application pour vérifier si toutes les dépendances sont correctement installées.

# angular
ng serve --open

Tout d’abord, nous devons importer ViewChild, ElementRef avec Component et AfterViewInit de @angular/core dans le fichier app.component.ts.

Après les avoir importés dans notre classe, créez un ElByClassName privé dans le constructeur et une fonction ngAfterViewInit qui enregistrera l’élément que nous obtenons par nom de classe en utilisant <HTMLElement>.

Une fois que nous avons l’élément que nous voulions, nous pouvons maintenant changer le nom du bouton en utilisant innerHTML. Notre code dans app.component.ts ressemblera à ci-dessous.

# 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';
}
}

Nous devons créer un modèle de bouton dans app.component.html avec la classe myButton.

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

Production:

En utilisant ces étapes simples, nous pouvons manipuler n’importe quel élément DOM en utilisant son ElementRef.

Si nous voulons remplacer l’élément au lieu de simplement changer le nom du bouton, nous pouvons utiliser outerHTML.

Dans ngAfterViewInit(), écrivez le code suivant pour remplacer le bouton par un titre.

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

Production: