Angular
Projection DOM

Scanner avec contentChild()

Nous savons que <ng-content> permet au Parent d'envoyer du HTML à l'intérieur de l'Enfant. Mais comment l'Enfant peut-il analyser ou modifier ce HTML qu'il a reçu ? C'est le rôle de contentChild() (le scanner à rayons X) !

Le Parent (Expéditeur)

Le parent envoie un gros bloc HTML à l'enfant. Il a pris soin de marquer le <h2> avec un hashtag #cardTitle.

<app-enfant>
  <h2 #cardTitle>John Doe</h2>
  <p>Développeur Web</p>
</app-enfant>
Composant Enfant (La Boîte)
Il reçoit du HTML via <ng-content>
Zone de projection

John Doe

Développeur Web Ninja

Ceci est un texte projeté depuis le composant parent. L'enfant ne sait pas ce que c'est, sauf le H2 qui a été taggé.

Le Scanner contentChild() a trouvé :

Le parent m'a envoyé un titre. Grâce à mon scanner, j'ai pu lire son contenu texte à l'intérieur de mon propre composant :
"John Doe"

viewChild vs contentChild

viewChild()

Cherche un élément qui se trouve dans mon propre template HTML.

contentChild()

Cherche un élément qui m'a été projeté par mon parent (qui se trouve dans mon <ng-content>).

Le Code Source Complet

import { Component } from '@angular/core';

@Component({
  selector: 'app-parent',
  template: `
    <app-enfant>
      <!-- Ce H2 est projeté dans l'enfant avec l'identifiant #cardTitle -->
      <h2 #cardTitle>John Doe</h2>
      <p>Développeur Web</p>
    </app-enfant>
  `
})
export class ParentComponent {
}
import { Component, contentChild, ElementRef } from '@angular/core';

@Component({
  selector: 'app-enfant',
  template: `
    <!-- Le HTML du parent atterrit ici -->
    <ng-content></ng-content>
    
    <hr>
    <!-- L'enfant peut maintenant lire le titre ! -->
    <div>Le titre projeté est : {{ title()?.nativeElement.textContent }}</div>
  `
})
export class EnfantComponent {
  // Le Scanner : il cherche #cardTitle UNIQUEMENT dans ce qui a été projeté
  title = contentChild<ElementRef>('cardTitle'); 
}