ElementRef en Angular

Nous présenterons ce qu’est ElementRef et comment l’utiliser dans Angular.

Utilisez ElementRef pour obtenir l’élément DOM dans Angular

ElemenRef est un wrapper autour d’un objet d’élément DOM natif qui contient la propriété nativeElement. Il contient la référence à l’élément DOM et nous pouvons l’utiliser 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 en détail ElementRef et savoir comment l’utiliser dans notre application.

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

Une fois que nous les aurons importés, nous allons créer un ElementRefDiv en utilisant ViewChild dans notre classe. Et nous allons créer une fonction ngAfterViewInit qui passera la valeur à notre div.

Ainsi, notre code dans app.component.ts ressemblera à ci-dessous.

# angular
import { Component, ViewChild, ElementRef, AfterViewInit } from '@angular/core';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css'],
})
export class AppComponent implements AfterViewInit {
  @ViewChild('ElementRefDiv') ElementView: ElementRef;

  ngAfterViewInit() {
    console.log(this.ElementView);
    this.ElementView.nativeElement.innerHTML = 'Hello I am Using ElementRef To Display this!';
  }
}

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

# angular
<div #ElementRefDiv></div>

Production :

Donc, avec ces étapes simples, nous pouvons manipuler n’importe quel élément DOM en utilisant ses ElementRef et ViewChild.