Afficher un objet undefined sans générer d’erreur

Dans un template de composant, accéder à obj.prop génère l’erreur XXX si jamais obj est undefined ou null.

<!-- ERREUR si `user` est undefined ou null -->
<p>{{ user.name }}</p>

Il arrive fréquemment qu’un objet ne soit pas encode défini au moment où le template est affiché, lorsque cet objet est chargé via une requête HTTP (asynchrone). Il faut donc mettre des garde-fous dans le template pour éviter les erreurs.

Le safe navigation operator permet d’étouffer les erreurs si l’on pense que l’objet risque d’être undefined.

<p>{{ user?.name }}</p>

La directive *ngIf permet d’afficher la balise et ce qu’elle contient uniquement si l’objet existe.

<p *ngI="user">{{ user?.name }}</p>

Les deux solutions produisent un HTML légèrement différent :

  • Avec le safe navigation operator, la balise <p>...</p> est toujours affichée, mais son contenu peut être vide.
  • Avec *ngIf, la balise <p>...</p> n’est affichée que si l’objet existe.