Angular 2 : inclusion de contenu dans un component avec ng-content

Si cela vous évoque la transclusion propre à AngularJS (angular 1), votre intuition est correcte. La transclusion d'AngularJS, simple possibilité d'introduire du contenu dans une directive, a été reprise avec nos bien aimés components propres à Angular 2. Imaginons un component "blague" destiné à se voir passer le contenu correspondant :

<blague>Ce qui caractérise Schwarzenegger c'est qu'il termine à tort</blague>  

Dans le template du component dont le selector est 'blague', il suffit d'utiliser

<ng-content></ng-content>  

pour afficher le contenu passé au component BlagueComponent, à savoir "Ce qui caractérise Schwarzenegger c'est qu'il termine à tort" ou tout autre contenu passé lors de l'utilisation du component "blague":

@Component({
  selector: 'blague',
  template: `
    <ng-content></ng-content>  // ici
  `
})
export class BlagueComponent {}  

Ce qui donne au total :

@Component({
  selector: 'app',
  template: `    
    <blague>Avec quoi ramasse t'on la papaye ? avec une foufourche</blague>
   <blague>Facebook c'est comme la prison , on est assis et on regarde les murs</blague> 
  `
})
export class AppComponent {}

@Component({
  selector: 'blague',
  template: `
    <ng-content></ng-content>
  `
})
export class BlagueComponent {}  

sinscrire à la newsletter pour être tenu au courant de l'actu MEAN

PS : l'équipe d'Angular insiste sur le fait qu'il ne faut plus dire Angular 2 mais simplement Angular. Mais l'habitude mettra probablement quelques mois à s'estomper.