Comment sélectionner un élément dans le template d'un composant Angular : guide complet avec TypeScript

Pourquoi document.querySelector ne fonctionne-t-il pas dans Angular ?

Imaginez : vous écrivez votre première application Angular et vous devez accéder à un simple <div> ou <input> directement dans le template du composant. La première idée est d'utiliser le bon vieux document.querySelector. Mais voilà le problème : dans la console — null ou undefined. Cela vous dit quelque chose ?

Angular n'est pas simplement une bibliothèque de manipulation du DOM. C'est un framework qui fonctionne avec sa propre abstraction au-dessus du DOM réel. L'accès direct aux éléments via des sélecteurs globaux viole l'architecture du framework, peut entraîner des fuites mémoire et des problèmes de performance. Mais la raison principale est qu'Angular utilise un DOM virtuel et le Shadow DOM (selon la stratégie d'encapsulation), donc votre document.querySelector ne voit tout simplement pas les éléments à l'intérieur du composant.

Heureusement, les développeurs d'Angular ont prévu une solution élégante — les décorateurs ViewChild et ViewChildren. Dans cet article, nous allons voir comment sélectionner correctement des éléments dans le template d'un composant en utilisant TypeScript, et examiner tous les pièges.

Les principales méthodes d'accès aux éléments du template

Dans Angular, il existe trois approches principales pour sélectionner des éléments dans le template d'un composant :

\n
• Références de template (Template Reference Variables) — la méthode la plus simple pour un accès rapide
\n
• Décorateur ViewChild — pour accéder à un seul élément ou composant
\n
• Décorateur ViewChildren — pour accéder à une collection d'éléments du même type
\n

Chacune de ces approches a ses particularités et s'applique dans différents scénarios. Examinons-les en détail.

1. Références de template : la méthode la plus rapide

Les références de template sont une "astuce" d'Angular qui permet d'accéder à un élément DOM directement dans le template, sans avoir à écrire de code dans la classe du composant. Il suffit de placer #nomRéférence sur l'élément souhaité.

// component.html\n<input #myInput type="text" placeholder="Saisissez du texte">\n<button (click)="focusInput(myInput)">Focus sur l'input</button>

Dans cet exemple, #myInput est une référence de template. Elle crée automatiquement une variable qui peut être passée aux méthodes du composant. Notez : nous passons l'élément lui-même, pas sa valeur.

// component.ts\nimport { Component } from '@angular/core';\n\n@Component({\n  selector: 'app-example',\n  templateUrl: './example.component.html'\n})\nexport class ExampleComponent {\n  focusInput(inputElement: HTMLInputElement): void {\n    inputElement.focus();\n    inputElement.style.borderColor = '#4CAF50';\n  }\n}

Point important : les références de template ne sont disponibles que dans le cadre du template. Vous ne pouvez pas les utiliser directement dans la classe du composant. Pour cela, il faut des décorateurs.

2. ViewChild : accès à un seul élément

Le décorateur @ViewChild est l'outil principal pour accéder à un élément ou à un composant enfant depuis la classe du composant. Il fonctionne sur la base d'un sélecteur : vous pouvez rechercher par référence de template, par type de composant ou par sélecteur CSS (avec des limitations).

// component.ts\nimport { Component, ViewChild, ElementRef, AfterViewInit } from '@angular/core';\n\n@Component({\n  selector: 'app-example',\n  template: `\n    <div #myDiv>Cet élément nous allons le sélectionner</div>\n    <p #myParagraph>Et celui-ci aussi</p>\n  `\n})\nexport class ExampleComponent implements AfterViewInit {\n  @ViewChild('myDiv') myDiv!: ElementRef;\n  @ViewChild('myParagraph') myParagraph!: ElementRef;\n\n  ngAfterViewInit(): void {\n    // Important ! L'accès aux éléments n'est possible qu'après l'initialisation de la vue\n    console.log(this.myDiv.nativeElement.textContent); // "Cet élément nous allons le sélectionner"\n    this.myPara