Aller au contenu principal

10-1 Décorateur Input()

Pour recevoir de l'information, un composant peut utiliser le décorateur @Input(). Il s'agit d'un décorateur de propriété ajoutant certaines fonctionnalités.

Ajouter une entrée @Input() à ProjetsListe​

Pour spécifier que le composant recevra en entrée des données, on utilise le décorateur @Input():

src/app/features/projets/components/projets-liste.ts
export class ProjetsListe {
  @Input() projets: string[] | null = null;
}
info

Vous pouvez retirer la fonction d'ajout de projets et la liste précédente, nous ne l'utiliserons plus, elle était simplement utilisée pour introduire le concept d'événements.

La propriété est déclarée de la même façon qu'une propriété de classe normale (projets: string[]), à l'exception qu'on ajoute @Input() à l'avant.

  • @Input(): décorateur pour indiquer que le composant recevra en entrée des données.
  • projets: string[] | null = null;: le type de données sera un tableau de string (string[] OU null) et est initialisé à null puisqu'au départ on ne connait pas la liste.

Par contre, maintenant il n'y a plus de projets d'affichés et vous avez une erreur! ☹️

danger
✘ [ERROR] NG1: Object is possibly 'null'. [plugin angular-compiler]

    src/app/features/projets/components/projets-liste.ts:12:16:
      12 │     @if(projets.length > 0){
         ╵

img

Gérer le cas où la liste est null​

Le compilateur vous indique que la liste de projets reçue peut être null et que l'appel à projets.length peut ainsi possiblement générer une erreur si tel est le cas.

Ajoutez simplement une condition pour vérifier si la variable possède une valeur, en plus de la taille du tableau:

@if(projets && projets.length > 0){
<ul>
  @for(projet of projets; track $index) {
  <li>{{ projet }}</li>
  }
</ul>
} @else {
  <p>Aucun projet</p>
}
À propos des valeurs truthy et

En TypeScript (et JavaScript), une valeur est considérée comme truthy si elle est évaluée comme true dans un contexte booléen.

Valeurs falsy​

  • false
  • 0
  • "" (chaîne vide)
  • null
  • undefined
  • NaN

Valeurs truthy​

Toutes les autres valeurs, incluant:

  • true
  • Nombres non-zéro (1, -5, 3.14)
  • Chaînes non-vides ("hello", "0")
  • Objets et tableaux ({}, [])

Par rapport à notre cas​

@if(projets && projets.length > 0) {
}

Cette condition vérifie deux choses grâce à l'opérateur &&:

  1. projets est truthy (donc pas null ou undefined)
  2. projets.length > 0 est vraie (tableau non-vide)

Cela est important puisque...

// Sans la vérification truthy
@if(projets.length > 0) // ❌ Erreur si projets est null/undefined

// Avec la vérification truthy  
@if(projets && projets.length > 0) // ✅ Sécurisé

L'opérateur && utilise l'évaluation court-circuit: si projets est falsy, la deuxième partie n'est jamais évaluée, évitant ainsi l'erreur Cannot read property 'length' of null/undefined.

Cette technique est un mécanisme courant pour vérifier l'existence d'un objet avant d'accéder à ses propriétés.

Ajouter la liste de projets au composant parent projets-index​

Ajoutez le tableau de projets au composant projets-index. En effet, c'est ce composant qui est le composant parent et qui contiendra les données à envoyer au composant de liste. Le composant de liste recevra en entrée les données à afficher.

src/app/features/projets/pages/projets-index.ts
export class ProjetsIndex {
  protected projets: string[] = [
    "Discreddit",
    "Organisation du Lan Party",
    "Organisation de la soirée jeu vidéo",
  ]
}

Passer la liste de projets à projets-liste​

On peut maintenant passer la liste de projets à projets-liste via son Input()

Pour passer le paramètre, on met entre crochets le nom de l'entrée spécifiée via Input() (projets) et ensuite on passe la variable locale qui dans notre cas s'appelle projets.

Les deux variables ont le même nom, mais font référence à deux variables différentes. Celle entre crochets fait référence à l'entrée du composant réutilisable, alors que l'autre fait référence à la propriété du composant projets-index.

src/app/features/projets/pages/projets-index.ts
@Component({
  selector: 'app-projets-index',
  imports: [
    ProjetsListe
  ],
  template: `
    <h1>Projets</h1>
    <app-projets-liste [projets]="projets"></app-projets-liste>
  `,
  styles: ``
})
export class ProjetsIndex {
  protected projets: string[] = [
    "Discreddit",
    "Organisation du Lan Party",
    "Organisation de la soirée jeu vidéo",
  ]
}

Nous avons maintenant retrouvé notre liste de projets! 😅

http://localhost:4200

img