📢 Je vous présente le livre Angular

  • 1) Il offre un contenu clair et concis, tout en couvrant une multitude de concepts d'Angular.
  • 2) Le livre est structurĂ© en trois niveaux : dĂ©butant, intermĂ©diaire et avancĂ©
  • 3) traite des pratiques les plus rĂ©centes d'Angular, comme les signaux, les vues diffĂ©rĂ©es, la gestion des flux, entre autres
  • 4) De plus, vous y trouverez plusieurs liens vers des exemples de code source pour approfondir vos connaissances en pratique.
Consulter un extrait

Skip to content

Comment utiliser ngAfterContentInit dans Angular ? ​

ngAfterContentInit est un hook de cycle de vie Angular qui est appelé une fois après que le contenu externe du composant (y compris les projections) a été initialisé. Vous pouvez l'utiliser pour effectuer des tâches d'initialisation qui dépendent du contenu externe de votre composant.

Voici un exemple de composant qui utilise ngAfterContentInit :

ts
import { Component, AfterContentInit } from '@angular/core';

@Component({
  selector: 'app-my-component',
  standalone: true,
  template: `
    <h1>Mon composant</h1>
    <ng-content></ng-content>
  `,
})
export class MyComponent implements AfterContentInit {
  ngAfterContentInit() {
    console.log('Le contenu externe du composant a été initialisé !');
  }
}

Vous pouvez utiliser ngAfterContentInit dans votre template de composant de la façon suivante :

html
<app-my-component>
  <p>Contenu externe du composant</p>
</app-my-component>

Lorsque le composant sera initialisé, la méthode ngAfterContentInit sera appelée une fois et le message "Le contenu externe du composant a été initialisé !" sera affiché dans la console.

Chaque mois, recevez en avant-première notre newsletter avec les dernières actualités, tutoriels, astuces et ressources Angular directement par email !