Bases

import { DatePipe } from '@angular/common';
import { Component, input, signal } from '@angular/core';

@Component({
  selector: 'app-pastille',
  template: `<span class="pastille">{{ texte() }}</span>`,
  // Styles encapsules : ils ne touchent que le template de ce composant.
  styles: `.pastille { border-radius: 1em; padding: 0 0.5em; background: #eee; }`,
})
export class Pastille {
  readonly texte = input.required<string>();
}

@Component({
  // La balise qui instanciera le composant dans un autre template.
  selector: 'app-fiche-tache',
  // Tout ce que le template utilise hors du HTML se declare ici : composants,
  // directives, pipes. C'est la seule portee qui existe.
  imports: [Pastille, DatePipe],
  // Ni standalone: true (le defaut depuis Angular 19), ni OnPush (le defaut
  // depuis Angular 22) : les ecrire ne changerait rien.
  template: `
    <h3>{{ titre() }}</h3>
    <app-pastille [texte]="statut()" />
    <p>Creee le {{ creation | date: 'dd/MM/yyyy' }}</p>
  `,
})
export class FicheTache {
  // protected : lisible par le template, absent de l'API publique de la classe.
  protected readonly titre = signal('Relire le contrat');
  protected readonly statut = signal('en cours');
  protected readonly creation = new Date(2026, 8, 25);
}

// Rendu : <h3>Relire le contrat</h3>, la pastille « en cours »,
// puis <p>Creee le 25/09/2026</p>.

import { Component, computed, signal } from '@angular/core';

type Statut = 'a-faire' | 'en-cours' | 'terminee';

interface Tache {
  readonly id: number;
  readonly titre: string;
  readonly statut: Statut;
}

@Component({
  selector: 'app-liste-taches',
  template: `
    <!-- @let nomme une valeur pour la suite du template. -->
    @let restantes = nombreRestantes();

    @if (restantes === 0) {
      <p>Tout est fait.</p>
    } @else {
      <p>{{ restantes }} tache(s) restante(s)</p>
    }

    <!-- as nomme le resultat de la condition, avec son type retreci :
         enCours() rend Tache | undefined, tache est une Tache. -->
    @if (enCours(); as tache) {
      <p>En cours : {{ tache.titre }}</p>
    }

    <ul>
      @for (tache of taches(); track tache.id; let derniere = $last) {
        <li [class.derniere]="derniere">
          {{ tache.titre }} :
          <!-- @default never : chaque valeur de Statut doit avoir son @case. -->
          @switch (tache.statut) {
            @case ('a-faire') { a faire }
            @case ('en-cours') { en cours }
            @case ('terminee') { terminee }
            @default never;
          }
        </li>
      } @empty {
        <li>Aucune tache.</li>
      }
    </ul>
  `,
})
export class ListeTaches {
  protected readonly taches = signal<readonly Tache[]>([
    { id: 1, titre: 'Ecrire', statut: 'terminee' },
    { id: 2, titre: 'Relire', statut: 'en-cours' },
    { id: 3, titre: 'Publier', statut: 'a-faire' },
  ]);

  protected readonly nombreRestantes = computed(
    () => this.taches().filter((tache) => tache.statut !== 'terminee').length,
  );

  protected readonly enCours = computed(() =>
    this.taches().find((tache) => tache.statut === 'en-cours'),
  );
}

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

interface Tache {
  readonly id: number;
  readonly titre: string;
}

@Component({
  selector: 'app-notes-taches',
  template: `
    @for (tache of taches(); track $index) {
      <p>
        <label>{{ tache.titre }} <input placeholder="Note" /></label>
        <button type="button" (click)="retirer(tache.id)">Retirer</button>
      </p>
    }
  `,
})
export class NotesTaches {
  protected readonly taches = signal<readonly Tache[]>([
    { id: 1, titre: 'Ecrire' },
    { id: 2, titre: 'Relire' },
    { id: 3, titre: 'Publier' },
  ]);

  protected retirer(id: number): void {
    this.taches.update((taches) => taches.filter((tache) => tache.id !== id));
  }
}

// Saisir « urgent » dans la note de Relire, puis retirer Ecrire :
//   Relire  [      ]
//   Publier [urgent]
// La cle est la position. La vue de la position 0 est gardee et recoit
// Relire ; celle de la position 1, qui porte la saisie, recoit Publier ;
// celle de la position 2 est detruite. Les donnees ont suivi, le DOM non.

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

interface Tache {
  readonly id: number;
  readonly titre: string;
}

@Component({
  selector: 'app-notes-taches',
  template: `
    @for (tache of taches(); track tache.id) {
      <p>
        <label>{{ tache.titre }} <input placeholder="Note" /></label>
        <button type="button" (click)="retirer(tache.id)">Retirer</button>
      </p>
    }
  `,
})
export class NotesTaches {
  protected readonly taches = signal<readonly Tache[]>([
    { id: 1, titre: 'Ecrire' },
    { id: 2, titre: 'Relire' },
    { id: 3, titre: 'Publier' },
  ]);

  protected retirer(id: number): void {
    this.taches.update((taches) => taches.filter((tache) => tache.id !== id));
  }
}

// Meme scenario :
//   Relire  [urgent]
//   Publier [      ]
// La cle 1 a disparu : seule la vue d'Ecrire est detruite, les deux autres
// sont conservees telles quelles, saisie comprise.

import { Component, computed, signal } from '@angular/core';

@Component({
  selector: 'app-recherche-taches',
  template: `
    <!-- Interpolation : la valeur devient du texte, echappe. Un terme qui
         contient <b> s'affiche en toutes lettres, il n'est pas interprete. -->
    <h3>Recherche : {{ terme() || 'tout' }}</h3>

    <!-- [propriete] ecrit une propriete du DOM ; (evenement) pose un
         ecouteur, que keydown.escape restreint a une touche. $event est
         l'evenement ; sur un input, son target est type HTMLInputElement. -->
    <input
      type="search"
      [value]="terme()"
      (input)="terme.set($event.target.value)"
      (keydown.escape)="terme.set('')"
    />
    <button type="button" [disabled]="terme() === ''" (click)="terme.set('')">Effacer</button>

    <!-- Une classe, une propriete CSS, un attribut. null retire le style
         ou l'attribut. -->
    <p
      [class.vide]="resultats() === 0"
      [style.font-weight]="resultats() > 1 ? 'bold' : null"
      [attr.data-resultats]="resultats()"
    >
      {{ resultats() }} resultat(s)
    </p>
  `,
})
export class RechercheTaches {
  protected readonly terme = signal('');
  private readonly titres = ['Ecrire', 'Relire', 'Publier'];

  protected readonly resultats = computed(
    () => this.titres.filter((titre) => titre.toLowerCase().includes(this.terme().toLowerCase())).length,
  );
}

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

@Component({
  selector: 'app-envoi',
  template: `
    <!-- Une interpolation dans un attribut devient une liaison de propriete,
         mais sa valeur est toujours une chaine. disabled recoit 'false',
         chaine non vide donc vraie : le bouton est desactive d'emblee. -->
    <button type="submit" disabled="{{ envoiEnCours() }}">Envoyer</button>
  `,
})
export class Envoi {
  protected readonly envoiEnCours = signal(false);
}

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

@Component({
  selector: 'app-envoi',
  template: `
    <!-- Les crochets passent la valeur avec son type : le booleen false. -->
    <button type="submit" [disabled]="envoiEnCours()">Envoyer</button>
  `,
})
export class Envoi {
  protected readonly envoiEnCours = signal(false);
}

import { Component, booleanAttribute, computed, input, model, output, signal } from '@angular/core';

@Component({
  selector: 'app-note-etoiles',
  template: `
    @for (n of etoiles(); track n) {
      <button
        type="button"
        [aria-label]="n + ' sur ' + max()"
        [disabled]="lectureSeule()"
        (click)="choisir(n)"
      >
        {{ n <= note() ? '★' : '☆' }}
      </button>
    }
  `,
})
export class NoteEtoiles {
  // Obligatoire : l'omettre dans un template parent ne compile pas.
  readonly max = input.required<number>();

  // L'attribut nu, <app-note-etoiles lectureSeule />, vaut true, comme un
  // attribut booleen HTML.
  readonly lectureSeule = input(false, { transform: booleanAttribute });

  // Une entree que le composant peut ecrire : chaque set qui change la
  // valeur emet noteChange.
  readonly note = model(0);

  // Une sortie : le parent l'ecoute avec (validee), et $event vaut n.
  readonly validee = output<number>();

  protected readonly etoiles = computed(() =>
    Array.from({ length: this.max() }, (_, i) => i + 1),
  );

  protected choisir(n: number): void {
    this.note.set(n);
    this.validee.emit(n);
  }
}

@Component({
  selector: 'app-avis',
  imports: [NoteEtoiles],
  template: `
    <!-- [(note)]="note" vaut [note]="note()" plus (noteChange)="note.set($event)". -->
    <app-note-etoiles [max]="5" [(note)]="note" (validee)="enregistrer($event)" />
    <app-note-etoiles [max]="5" [note]="note()" lectureSeule />
    <p>{{ message() }}</p>
  `,
})
export class Avis {
  protected readonly note = signal(3);
  protected readonly message = signal('');

  protected enregistrer(note: number): void {
    this.message.set(`Note ${note} enregistree`);
  }
}

// Clic sur la quatrieme etoile du premier composant : note() vaut 4 dans
// Avis, le second composant affiche quatre etoiles pleines, et le message
// devient « Note 4 enregistree ».

import { Directive, HostBinding, HostListener, signal } from '@angular/core';

@Directive({ selector: '[appSurbrillance]' })
export class Surbrillance {
  // HostBinding lie la valeur de la propriete, pas une expression. Cette
  // valeur est le signal lui-meme, une fonction, donc toujours vraie : la
  // classe est posee des le premier rendu et ne part jamais.
  @HostBinding('class.surbrillance')
  protected readonly active = signal(false);

  @HostListener('mouseenter')
  protected entrer(): void {
    this.active.set(true);
  }

  @HostListener('mouseleave')
  protected sortir(): void {
    this.active.set(false);
  }
}

import { Component, Directive, input, signal } from '@angular/core';

@Directive({
  selector: '[appSurbrillance]',
  // Les liaisons sur l'element hote, dans la syntaxe d'un template.
  host: {
    '[class.surbrillance]': 'active()',
    '[style.background-color]': "active() ? couleur() : null",
    '(mouseenter)': 'active.set(true)',
    '(mouseleave)': 'active.set(false)',
  },
})
export class Surbrillance {
  // L'entree porte le nom du selecteur : appSurbrillance="lightblue".
  readonly couleur = input('gold', { alias: 'appSurbrillance' });
  protected readonly active = signal(false);
}

@Component({
  selector: 'app-liste-courte',
  imports: [Surbrillance],
  template: `
    <ul>
      <li appSurbrillance="lightblue">Ecrire</li>
      <li appSurbrillance="gold">Relire</li>
    </ul>
  `,
})
export class ListeCourte {}

import { Component, Pipe, PipeTransform, signal } from '@angular/core';

interface Tache {
  readonly titre: string;
  readonly terminee: boolean;
}

@Pipe({ name: 'restantes', pure: false })
export class RestantesPipe implements PipeTransform {
  transform(taches: readonly Tache[]): number {
    return taches.filter((tache) => !tache.terminee).length;
  }
}

@Component({
  selector: 'app-tableau-taches',
  imports: [RestantesPipe],
  template: `
    <p>{{ taches | restantes }} tache(s) restante(s)</p>
    <input #champ [value]="titre()" (input)="titre.set(champ.value)" />
    <button type="button" [disabled]="titre() === ''" (click)="ajouter()">Ajouter</button>
  `,
})
export class TableauTaches {
  protected readonly titre = signal('');

  // Modifie en place par push : la reference du tableau ne change jamais.
  // Avec un pipe pur, le compte resterait a 1 apres chaque ajout.
  protected readonly taches: Tache[] = [{ titre: 'Ecrire', terminee: false }];

  protected ajouter(): void {
    this.taches.push({ titre: this.titre(), terminee: false });
    this.titre.set('');
  }
}

import { Component, Pipe, PipeTransform, signal } from '@angular/core';

interface Tache {
  readonly titre: string;
  readonly terminee: boolean;
}

// Pur par defaut : transform n'est rappele que pour une nouvelle reference.
@Pipe({ name: 'restantes' })
export class RestantesPipe implements PipeTransform {
  transform(taches: readonly Tache[]): number {
    return taches.filter((tache) => !tache.terminee).length;
  }
}

@Component({
  selector: 'app-tableau-taches',
  imports: [RestantesPipe],
  template: `
    <p>{{ taches() | restantes }} tache(s) restante(s)</p>
    <input #champ [value]="titre()" (input)="titre.set(champ.value)" />
    <button type="button" [disabled]="titre() === ''" (click)="ajouter()">Ajouter</button>
  `,
})
export class TableauTaches {
  protected readonly titre = signal('');
  protected readonly taches = signal<readonly Tache[]>([{ titre: 'Ecrire', terminee: false }]);

  protected ajouter(): void {
    // Un nouveau tableau : nouvelle reference, le pipe recalcule une fois.
    this.taches.update((taches) => [...taches, { titre: this.titre(), terminee: false }]);
    this.titre.set('');
  }
}

import { Component, OnInit, input } from '@angular/core';

interface Tache {
  readonly titre: string;
  readonly terminee: boolean;
}

@Component({
  selector: 'app-avancement',
  template: `<p>{{ terminees }} / {{ taches().length }} terminees</p>`,
})
export class Avancement implements OnInit {
  readonly taches = input.required<readonly Tache[]>();
  protected terminees = 0;

  ngOnInit(): void {
    // Les entrees ont leur valeur, le calcul passe. Mais une seule fois.
    this.terminees = this.taches().filter((tache) => tache.terminee).length;
  }
}

// Le parent passe deux taches dont une terminee : « 1 / 2 terminees ».
// Il passe ensuite trois taches terminees : « 1 / 3 terminees ». Le
// template relit taches(), qui a change, et le champ, qui n'a pas bouge.

import {
  Component,
  DestroyRef,
  ElementRef,
  OnInit,
  afterNextRender,
  computed,
  inject,
  input,
  signal,
  viewChild,
} from '@angular/core';

interface Tache {
  readonly titre: string;
  readonly terminee: boolean;
}

@Component({
  selector: 'app-avancement',
  host: { '[class.compact]': 'compact()' },
  template: `
    <p>{{ terminees() }} / {{ taches().length }} terminees</p>
    <input #champ placeholder="Nouvelle tache" />
  `,
})
export class Avancement implements OnInit {
  readonly taches = input.required<readonly Tache[]>();

  // Remplace ngOnChanges : recalcule a chaque nouvelle liste, et n'est
  // evalue qu'a la premiere lecture, quand l'entree a sa valeur.
  protected readonly terminees = computed(
    () => this.taches().filter((tache) => tache.terminee).length,
  );

  protected readonly compact = signal(false);
  private readonly champ = viewChild.required<ElementRef<HTMLInputElement>>('champ');

  constructor() {
    // Le constructeur est le contexte d'injection : inject, afterNextRender
    // et DestroyRef s'y obtiennent.
    const hote = inject<ElementRef<HTMLElement>>(ElementRef).nativeElement;
    const destruction = inject(DestroyRef);

    // Une fois, apres l'ecriture du DOM ; jamais au rendu serveur.
    afterNextRender(() => {
      this.champ().nativeElement.focus();

      const observateur = new ResizeObserver(([entree]) =>
        this.compact.set(entree.contentRect.width < 320),
      );
      observateur.observe(hote);

      // Le nettoyage s'ecrit a cote de ce qu'il nettoie.
      destruction.onDestroy(() => observateur.disconnect());
    });
  }

  ngOnInit(): void {
    // Premier point ou les entrees ont leur valeur : utile pour une action
    // ponctuelle, pas pour un etat qui doit suivre l'entree.
    console.info(`Avancement ouvert sur ${this.taches().length} taches`);
  }
}