Depuis Angular v16.1.0, il existe une alternative facile Ă lâutilisation de setter et getter pour transformer les inputs.
Le décorateur @Input inclut désormais une option de transformation qui accepte une fonction permettant de transformer l'input avant de l'affecter à l'instance du composant (ou directive).
A quoi ça sert me direz-vous ?
Voici un premier exemple pour comprendre :
Imaginons que nous ayons un composant TowerComponent
qui reprĂ©sente une tour (une simple div avec un gris en background đ
) le composant prend en input une hauteur.
function toNumber(value: string | number) {
return isNumber(value) ? value : parseInt(value);
}
@Component({
standalone: true,
selector: 'app-tower',
template: `<div class="tower"[style.height.px]="height"></div>`,
styles: [`
.tower {
background: #555;
width: 10px;
}
`]
})
export class TowerComponent {
@Input({ transform: toNumber }) height: number;
}
Alors qu'avec le pattern setter/getter on aurait eu :
export class ButtonComponent {
@Input()
get height() {
return this._height;
}
set height(value: string | number) {
this._height = toNumber(value)
}
private _height = false;
}
Plus lisible avec transform n'est-ce pas ?
La fonction de transformation toNumber
se chargera de la conversion, transformant ainsi la valeur de string en nombre.
Dans le composant parent on aura :
<app-tower height="42" />
C'est pas tout, Angular fournit Ă©galement des fonctions utilitaires dans @angular/core
permettant de couvrir les cas dâutilisation courant :
numberAttribute
booleanAttribute
On peut donc supprimer la fonction toNumber
et refactoriser notre TowerComponent
en :
export class TowerComponent {
@Input({ transform: numberAttribute }) height: number;
}
Un autre scĂ©nario oĂč cette fonctionnalitĂ© est pratique est lors de la manipulation d'attributs HTML.
Les attributs boolĂ©ens sont considĂ©rĂ©s comme vrais s'ils sont prĂ©sents sur un nĆud DOM et comme faux s'ils sont omis.
Cependant, Angular interprĂšte tous les attributs statiques comme des chaĂźnes de caractĂšres, ce qui entraĂźne souvent un problĂšme. Par exemple, le code suivant disabled
renverrait une chaĂźne vide :
@Component({
standalone: true,
selector: 'app-button',
// ...
})
export class ButtonComponent {
@Input() disabled: boolean;
}
<app-button disabled />
Lâutilisation de lâutilitaire booleanAttribute
avec lâoption de transformation permet de rĂ©soudre ce problĂšme sans utiliser le pattern setter/getter.
@Component({
standalone: true,
selector: 'app-button',
// ...
})
export class ButtonComponent {
@Input({ transform: booleanAttribute }) disabled: boolean = false;
}
La fonction de transformation booleanAttribute
sâoccupe de gĂ©rer la conversion en boolĂ©en. GrĂące à ça, lorsque nous utilisons le composant ButtonComponent
et que nous spécifions l'attribut disabled :
<app-button disabled />
La fonction de transformation interprétera correctement la présence de l'attribut comme vrai.
Pour conclure nous avons vu que l'option de transformation dans le dĂ©corateur @Input simplifie le processus de transformation d'Input, offrant une approche qui rend notre code plus lisible par rapport Ă lâapproche traditionnelles. L'utilisation des fonctions numberAttribute
et booleanAttribute
nous permet de couvrir la majoritĂ© des cas dâutilisation.
Top comments (0)