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 la directive*ngIf.

Une directive est une classe qui vient ajouter du comportement à l'élément sur lequel elle est posée. L'astérisque au début du nom  *ngIf  nous montre qu'il s'agit d'une directive structurelle, qui viendra donc toucher à la structure du document.

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 {
  constructor(public title: string,
              public description: string,
              public imageUrl: string,
              public createdDate: Date,
              public snaps: number,
              public location?: string) {
  }
}

Maintenant, si vous ajoutez un argument après le nombre de  snaps  lors de la construction d'un FaceSnap, l'objet aura une propriété  location  qui y correspondra.

Je trouve que l'empreinte de ce  constructor  commence à devenir un peu lourde et trop compliquée : il y a trop d'arguments. Je vous propose donc de modifier la classe pour simplement lister les propriétés et leurs types :

export class FaceSnap {
  title!: string;
  description!: string;
  imageUrl!: string;
  createdDate!: Date;
  snaps!: number;
  location?: string;
}

Du coup, il faudra modifier la création des FaceSnaps dans AppComponent pour simplement créer des objets qui ont les propriétés requises :

this.mySnap = {
  title: 'Archibald',
  description: 'Mon meilleur ami depuis tout petit !',
  imageUrl: 'https://cdn.pixabay.com/photo/2015/05/31/16/03/teddy-bear-792273_1280.jpg',
  createdDate: new Date(),
  snaps: 0
};
this.myOtherSnap = {
  title: 'Three Rock Mountain',
  description: 'Un endroit magnifique pour les randonnées.',
  imageUrl: 'https://upload.wikimedia.org/wikipedia/commons/thumb/0/08/Three_Rock_Mountain_Southern_Tor.jpg/2880px-Three_Rock_Mountain_Southern_Tor.jpg',
  createdDate: new Date(),
  snaps: 0
};
this.myLastSnap = {
  title: 'Un bon repas',
  description: 'Mmmh que c\'est bon !',
  imageUrl: 'https://wtop.com/wp-content/uploads/2020/06/HEALTHYFRESH.jpg',
  createdDate: new Date(),
  snaps: 0
};

Ajoutez maintenant une propriété  location  sur au moins un de vos FaceSnaps pour pouvoir jouer avec la directive  *ngIf  !

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 :

<p *ngIf="faceSnap.location">Photo prise à {{ faceSnap.location }}</p>

On passe à  *ngIf  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 string). 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ù :

<p *ngIf="faceSnap.location === 'Paris'">

pour afficher uniquement les photos prises à Paris. On peut même mettre la directive  *ngIf  sur des components. Dans  app.component.html, on pourrait imaginer un filtre pour montrer uniquement les FaceSnaps ayant plus de 5  snaps  :

<app-face-snap [faceSnap]="mySnap" *ngIf="mySnap.snaps > 5"></app-face-snap>
<app-face-snap [faceSnap]="myOtherSnap" *ngIf="myOtherSnap.snaps > 5"></app-face-snap>
<app-face-snap [faceSnap]="myLastSnap" *ngIf="myLastSnap.snaps > 5"></app-face-snap>

Dans mon cas, aucun FaceSnap n'est affiché dans cette situation. Je peux d'ailleurs regarder l'inspecteur d'éléments de mon navigateur :

Je vois simplement des commentaires pour me prévenir que des  *ngIf  ont retourné  false  : il n'y a en effet aucun élément ajouté.

*ngIf  permet donc de structurer vos components selon les conditions que vous choisissez. Dans le prochain chapitre, vous découvrirez une autre directive structurelle :  *ngFor. 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 la directive  *ngIf  à un élément (qui peut aussi être un component) dit à Angular d'ajouter ou non cet élément au DOM selon la condition que vous lui passez, par exemple  <p *ngIf="size === 'large'">

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