Angular
Accès DOM

La fonction viewChild()

Parfois, vous avez besoin de manipuler directement un élément HTML (changer sa couleur, le faire bouger, etc). En Angular, on évite d'utiliser document.getElementById(). On utilise la "Télécommande" : viewChild() (l'équivalent de useRef en React).

La Télécommande

Ces boutons utilisent viewChild pour cibler et modifier directement l'élément HTML à droite.

Élément Ciblé #userInfo

En attente d'ordres...

Comment cibler un élément ?

1. Marquer la cible (HTML)

On ajoute un hashtag (une référence locale) sur l'élément qu'on veut piloter.

<div #maCible> ... </div>
2. Lier la télécommande (TS)

On utilise viewChild() pour récupérer l'élément. Comme ça retourne un Signal, on l'appelle avec des parenthèses ().

cible = viewChild<ElementRef>('maCible');

// Pour l'utiliser :
this.cible()?.nativeElement.style.color = 'red';

Le Code Source Complet

dom-access.component.ts
import { Component, ElementRef, viewChild } from '@angular/core';

@Component({
  selector: 'app-parent',
  template: `
    <!-- L'élément cible porte le #userInfo -->
    <div #userInfo>En attente...</div>

    <button (click)="afficherNom()">Modifier la Div</button>
  `
})
export class ParentComponent {
  // On connecte la télécommande au "#userInfo"
  infoElement = viewChild<ElementRef>('userInfo');

  afficherNom() {
    // On lit le signal () pour obtenir l'élément HTML
    const element = this.infoElement(); 

    if (element) {
      // On le manipule comme du JS classique !
      element.nativeElement.style.backgroundColor = 'blue'; 
      element.nativeElement.style.color = 'white'; 
      element.nativeElement.textContent = "Je suis John Doe !"; 
    }
  }
}