Débutez avec Angular

Affichez des données dynamiques

L'une des principales raisons d'être de toute application est de donner des informations à l'utilisateur, de lui afficher des données dynamiques. En pratique, ça signifie afficher ou utiliser des valeurs venant du TypeScript dans le template. À terme, ces données pourront venir d'une requête serveur, par exemple, ou d'une autre partie de l'application. Pour l'instant, vous allez travailler avec des données écrites en dur, et les passer au template.

En Angular, il y a deux façons principales d'exploiter une donnée venant du TypeScript dans le template : la string interpolation et la liaison par attribut, ou attribute binding. Mais pour afficher des données, il faut d'abord des données !

Ajoutez des données

On va commencer par ajouter quelques propriétés à notre classe FaceSnapComponent, qui correspondront aux différentes propriétés d'un FaceSnap. Commençons par ajouter un titre, une description, une date de mise en ligne, et un nombre de "snaps" (on va dire qu'un utilisateur "snappe" une photo quand il la trouve chouette) :

import { Component } from '@angular/core';

@Component({
  selector: 'app-face-snap',
  templateUrl: './face-snap.component.html',
  styleUrls: ['./face-snap.component.scss']
})
export class FaceSnapComponent {
  title: string;
  description: string;
  createdDate: Date;
  snaps: number;
}

Comme vous pouvez le constater, on crée un attribut de classe en associant le nom de l'attribut à son type.

Pour initialiser ces propriétés en suivant les best practices Angular, vous allez utiliser la méthode  ngOnInit()  (que vous aviez supprimée précédemment). Pour l'utiliser, votre component doit implémenter l'interface  OnInit  :

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-face-snap',
  templateUrl: './face-snap.component.html',
  styleUrls: ['./face-snap.component.scss']
})
export class FaceSnapComponent implements OnInit {
  title!: string;
  description!: string;
  createdDate!: Date;
  snaps!: number;

  ngOnInit() {
  }
}

On va maintenant initialiser les quatre propriétés dans la méthode  ngOnInit()  :

ngOnInit() {
  this.title = 'Archibald';
  this.description = 'Mon meilleur ami depuis tout petit !';
  this.createdDate = new Date();
  this.snaps = 6;
}

Ça y est, vous avez des données prêtes à être affichées !

Affichez du contenu avec la string interpolation

La string interpolation est la méthode la plus simple pour afficher le contenu d'une variable dans le template. Il suffit de mettre le nom de la variable à afficher entre doubles accolades {{ }} dans le HTML . Faisons-le maintenant avec les données de notre FaceSnap. Dans  face-snap.component.html  :

<h2>{{ title }}</h2>
<p>Mis en ligne le {{ createdDate }}</p>
<p>{{ description }}</p>
<p>🤌 {{ snaps }}</p>

Angular remplace la variable entre doubles accolades par sa valeur, et l'application donne :

Et voilà, vous pouvez afficher des valeurs venant du TypeScript !

Allons voir ça tout de suite !

Dynamisez des données avec l'attribute binding

L'objectif de l'application Snapface est de partager des images. Il nous faut donc un moyen d'afficher dynamiquement des images ! L'approche dans ce genre de cas sera souvent que le serveur renvoie l'URL de l'image à afficher. Il nous faut donc un moyen de lier cette URL dynamique à l'attribut  src  d'une balise  <img>  : attribute binding !

Ajoutez d'abord une propriété  imageUrl  au component, et initialisez-la avec une URL d'image valable :

imageUrl!: string;
// ...
this.imageUrl = 'https://cdn.pixabay.com/photo/2015/05/31/16/03/teddy-bear-792273_1280.jpg';

Pour lier notre URL, on pourrait imaginer quelque chose comme ceci :

<img src="{{ imageUrl }}" alt="{{ title }}">

… et techniquement, dans ce cas précis, cette syntaxe fonctionnerait, car les valeurs de  imageUrl  et de  title  sont des  string  ! Cependant, ce n'est pas la syntaxe préférée, car les valeurs associées à des attributs ne seront pas toujours des strings, et il est préférable d'avoir une syntaxe unique pour une fonctionnalité. On va donc préférer les crochets  []  :

<img [src]="imageUrl" [alt]="title">

Là, Angular associe les valeurs des propriétés TypeScript aux attributs de l'élément HTML, et vous avez une image qui s'affiche !

Ajoutez un peu de style

Pour donner un minimum de forme à votre component avant de continuer, je vous propose d'insérer quelques snippets.

Dans le  <head>  de  index.html  pour importer la police Roboto depuis Google Fonts :

<link rel="preconnect" href="https://fonts.googleapis.com"> 
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> 
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500&display=swap" rel="stylesheet">

Dans le fichier de styles principal  styles.scss, ajoutez :

* {
  font-family: Roboto, Helvetica, sans-serif;
}

Dans le template de FaceSnapComponent, ajoutez une  <div>  avec la classe suivante autour du contenu : 

<div class="face-snap-card">
  <h2>{{ title }}</h2>
  <p>Mis en ligne le {{ createdDate }}</p>
  <img [src]="imageUrl" [alt]="title">
  <p>{{ description }}</p>
  <p>🤌 {{ snaps }}</p>
</div>

Et enfin, dans le fichier de style spécifique à FaceSnapComponent, ajoutez :

.face-snap-card {
  width: 35%;
  img {
    width: 100%;
  }
}

En résumé

• On déclare les propriétés d'un component en haut de sa classe, et on les initialise dans la méthode  ngOnInit()

• La méthode  ngOnInit()  est appelée une fois par instance de component au moment de la création de cette instance.

• La string interpolation avec les doubles accolades  {{ }}  permet d'insérer la valeur d'une propriété TypeScript dans le template.

• L'attribute binding permet de lier la valeur d'une propriété TypeScript à un attribut HTML, en mettant l'attribut entre crochets  []  et en passant le nom de la propriété.

Dans le prochain chapitre, vous allez réagir à des événements du template (comme des clics, par exemple), avec du comportement TypeScript !