Signals dans les composants Angular

Maintenant que l’API Signals est stable et n’est plus en préversion, j’ai tendance à l’utiliser autant que possible pour définir les input et output de mes composants (ainsi que viewChild, viewChildren, contentChild et contentChildren).

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

@Component({
  selector: 'app-button',
  template: `
    <button (click)="onClick()">
        {{ label() }}
    </button>
  `,
})
export class ButtonComponent {
  label = input.required<string>();
  tooltipConfig = input.required<{ isConfirmable: boolean; /* autres propriétés pour styliser l’infobulle */ }>();

  clicked = output<void>();

  onClick() {
    this.clicked.emit(); // Les outputs signals conservent la même API que ceux de @Output.
  }
}

Imaginons maintenant que nous voulions créer une variable tooltip contenant le title à afficher selon que le bouton peut être confirmé ou non (avec l’input tooltipConfig).

Avant les signals, nous aurions implémenté le hook de cycle de vie OnChanges et utilisé la méthode ngOnChanges pour détecter les changements d’une ou des deux entrées du composant, par exemple :

ngOnChanges(changes: SimpleChanges) {
    if (!changes.tooltipConfig) {
        return;
    }
    const { previousValue, currentValue } = changes.tooltipConfig;
    // Comparer previousValue et currentValue pour vérifier si la valeur de tooltipConfig a changé
}

Nous pouvons maintenant créer un signal computed à partir du signal input :

tooltip = computed(() => {
    const label = this.label(); // Sera déclenché à chaque modification de label.
    const isConfirmable = this.tooltipConfig().isConfirmable; // Sera déclenché à chaque modification de tooltipConfig.
    return isConfirmable ? `${label} - You will need to confirm first` : label;
})

Le signal computed tooltip sera recalculé chaque fois que l’une des entrées change (comme avec la méthode ngOnChanges).