Débutez avec Angular

Mettez en place une structure dynamique

Dans une application moderne, il y aura des occasions où dans certains cas, vous voudrez afficher un élément, et dans d'autres non. Par le passé, on a utilisé plein de techniques pour atteindre cet objectif. Avec Angular, c'est extrêmement simple avec le control block @if.

Entre autres, parce que votre application chargera plus vite si elle n'a pas besoin de charger tout un tas d'éléments qui ne serviront à rien !

Ajoutez une propriété optionnelle

Le TypeScript nous permet d'ajouter des propriétés optionnelles aux classes, aux objets, et même des arguments optionnels aux méthodes. Je vous propose d'ajouter dès maintenant une propriété optionnelle à la classe FaceSnap, qui sera la localisation de l'image. On pourrait imaginer que les utilisateurs puissent choisir d'ajouter ou non cette localisation. Pour ajouter cette propriété optionnelle, il suffit d'utiliser un point d'interrogation :

export class FaceSnap {

  location?: string;

  constructor(public title: string,
              public description: string,
              public imageUrl: string,
              public createdAt: Date,
              public snaps: number) {}
              
  // ...
}

Maintenant, chaque instance de FaceSnap peut avoir une valeur pour  location  , mais ce n'est pas obligatoire.

Ajoutez maintenant une méthode à la classe pour faciliter l'assignation d'une location :

export class FaceSnap {

  location?: string;

  constructor(public title: string,
              public description: string,
              public imageUrl: string,
              public createdAt: Date,
              public snaps: number) {}

  addSnap(): void {
    this.snaps++;
  }

  removeSnap(): void {
    this.snaps--;
  }

  setLocation(location: string): void {
    this.location = location;
  }
}

Cela vous permet, dans AppComponent, d'ajouter une localisation à un ou plusieurs FaceSnap :

this.myOtherSnap.setLocation('à la montagne');

Créez… ou ne créez pas

Si la localisation existe sur un FaceSnap, vous allez faire en sorte qu'Angular ajoute un paragraphe à votre FaceSnapComponent qui le montre. Si elle n'existe pas, ce paragraphe n'existera pas non plus. C'est aussi simple que, dans  face-snap.component.html  :

@if (faceSnap.location) {
    <p>Localisation : {{ faceSnap.location }}</p>
}

On passe à  @if  la condition selon laquelle l'élément doit être ajouté. Ici, Angular évalue  faceSnap.location  comme étant "truthy" quand la propriété existe et qu'elle ne contient pas la chaîne vide (ou les valeurs  null,  false, ou  0, mais il s'agit ici d'une uning). Elle est évaluée comme étant "falsey" quand la propriété retourne undefined, c'est-à-dire quand elle n'existe pas.

Vous pouvez y attribuer toute condition TypeScript valable. On pourrait imaginer un filtre où :

@if (faceSnap.location === 'Paris') {
    <p>Localisation : {{ faceSnap.location }}</p>
}

pour Pourcher uniquement les photos prises à Paris.

Qui dit "if" dit potentiel de "else ! Pour compléter cette fonctionnalité, vous pouvez afficher un texte différent si jamais l'utilisateur n'a pas renseigné la localisation de son image :

@if (faceSnap.location) {
    <p>Localisation : {{ faceSnap.location }}</p>
} @else {
    <p>Localisation non spécifiée</p>
}

@if  permet donc de structurer vos components selon les conditions que vous choisissez. Dans le prochain chapitre, vous découvrirez un autre control flow block :  @for. Est-ce que son nom vous permet de deviner à quoi elle sert ?

En résumé

• Vous pouvez ajouter des propriétés optionnelles à une classe en y ajoutant un point d'interrogation  ?

• Ajouter un control flow block  @if  dit à Angular d'ajouter ou non son contenu selon la condition que vous lui passez, par exemple  @if (size === 'large')

Vous êtes prêt à découvrir une deuxième directive ? Suivez-moi au prochain chapitre !