DEV Community

Cover image for L’option transform des inputs Angular đŸȘ„
Timothy Alcaide
Timothy Alcaide

Posted on ‱ Edited on

L’option transform des inputs Angular đŸȘ„

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;
}
Enter fullscreen mode Exit fullscreen mode

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;
}
Enter fullscreen mode Exit fullscreen mode

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" />
Enter fullscreen mode Exit fullscreen mode

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;
}
Enter fullscreen mode Exit fullscreen mode

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 />
Enter fullscreen mode Exit fullscreen mode

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;
}
Enter fullscreen mode Exit fullscreen mode

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 />
Enter fullscreen mode Exit fullscreen mode

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.

Image of Datadog

Create and maintain end-to-end frontend tests

Learn best practices on creating frontend tests, testing on-premise apps, integrating tests into your CI/CD pipeline, and using Datadog’s testing tunnel.

Download The Guide

Top comments (0)

Image of Datadog

Create and maintain end-to-end frontend tests

Learn best practices on creating frontend tests, testing on-premise apps, integrating tests into your CI/CD pipeline, and using Datadog’s testing tunnel.

Download The Guide

👋 Kindness is contagious

Immerse yourself in a wealth of knowledge with this piece, supported by the inclusive DEV Community—every developer, no matter where they are in their journey, is invited to contribute to our collective wisdom.

A simple “thank you” goes a long way—express your gratitude below in the comments!

Gathering insights enriches our journey on DEV and fortifies our community ties. Did you find this article valuable? Taking a moment to thank the author can have a significant impact.

Okay