diff --git a/apps/angular/57-content-projection-default/src/app/app.component.ts b/apps/angular/57-content-projection-default/src/app/app.component.ts index b3e370a34..d38654be3 100644 --- a/apps/angular/57-content-projection-default/src/app/app.component.ts +++ b/apps/angular/57-content-projection-default/src/app/app.component.ts @@ -1,12 +1,17 @@ import { ChangeDetectionStrategy, Component } from '@angular/core'; -import { CardComponent } from './card.component'; +import { CardComponent, CardTitleComponent } from './card.component'; @Component({ - imports: [CardComponent], + imports: [CardComponent, CardTitleComponent], selector: 'app-root', template: ` - - + + Titre 1 +
Message1
+
+ + Titre 2 + `, host: { class: 'p-4 block flex flex-col gap-1', diff --git a/apps/angular/57-content-projection-default/src/app/card.component.ts b/apps/angular/57-content-projection-default/src/app/card.component.ts index 851a6619d..46a2f9e10 100644 --- a/apps/angular/57-content-projection-default/src/app/card.component.ts +++ b/apps/angular/57-content-projection-default/src/app/card.component.ts @@ -1,22 +1,29 @@ -import { ChangeDetectionStrategy, Component, input } from '@angular/core'; +import { ChangeDetectionStrategy, Component } from '@angular/core'; + +@Component({ + selector: 'app-card-title', + template: ` + + `, + changeDetection: ChangeDetectionStrategy.OnPush, +}) +export class CardTitleComponent {} @Component({ selector: 'app-card', imports: [], template: ` -
{{ title() }}
- @if (message()) { -
{{ message() }}
- } @else { -
Aucun message
- } +
+ +
+ +
+ Aucun message +
`, changeDetection: ChangeDetectionStrategy.OnPush, host: { class: 'p-4 border border-grey rounded-sm flex flex-col w-[200px]', }, }) -export class CardComponent { - title = input.required(); - message = input(undefined); -} +export class CardComponent {}