Ajouter une interpolation au template d'un composant

Cette leçon du tutoriel montre comment ajouter une interpolation aux templates Angular afin d'afficher des données dynamiques dans un template.

Ce que vous allez apprendre

• Votre application affichera des valeurs interpolées dans le template de HousingLocation.
• Votre application affichera les données d'un logement dans le navigateur.

Aperçu conceptuel de l'interpolation

Dans cette étape, vous allez afficher dans un template, à l'aide de l'interpolation, des valeurs lues depuis des propriétés input.

Avec {{ expression }} dans les templates Angular, vous pouvez afficher les valeurs de propriétés, d'inputs et d'expressions JavaScript valides.

Pour une explication plus approfondie, consultez le guide Afficher du texte dynamique avec l'interpolation de texte.

1. Mettre à jour le template de HousingLocation pour inclure des valeurs interpolées

   Cette étape ajoute une nouvelle structure HTML et des valeurs interpolées dans le template de HousingLocation.

   Dans l'éditeur de code :

   1. Allez dans src/app/housing-location/housing-location.ts
   2. Dans la propriété template du décorateur @Component, remplacez le balisage HTML existant par le code suivant :

      Mettre à jour le template de HousingLocation dans housing-location.ts

      import {Component, input} from '@angular/core';
      import {HousingLocationInfo} from '../housinglocation';
      
      @Component({
        selector: 'app-housing-location',
        template: `
          <section class="listing">
            <img
              class="listing-photo"
              [src]="housingLocation().photo"
              alt="Exterior photo of {{ housingLocation().name }}"
              crossorigin
            />
            <h2 class="listing-heading">{{ housingLocation().name }}</h2>
            <p class="listing-location">{{ housingLocation().city }}, {{ housingLocation().state }}</p>
          </section>
        `,
        styleUrls: ['./housing-location.css'],
      })
      export class HousingLocation {
        housingLocation = input.required<HousingLocationInfo>();
      }

   Dans ce template mis à jour, vous avez utilisé un property binding pour lier housingLocation.photo à l'attribut src. L'attribut alt utilise l'interpolation pour donner plus de contexte au texte alternatif de l'image.

   Vous utilisez l'interpolation pour inclure les valeurs name, city et state de la propriété housingLocation.

2. Vérifier que les modifications s'affichent dans le navigateur

   1. Enregistrez toutes les modifications.
   2. Ouvrez le navigateur et vérifiez que l'application affiche les données d'exemple : photo, ville et état.

Vous disposez désormais de deux compétences importantes :

• transmettre des données aux composants
• interpoler des valeurs dans un template

Grâce à ces compétences, votre application peut désormais partager des données et afficher des valeurs dynamiques dans le navigateur. Beau travail jusqu'ici.

Pour en savoir plus sur les sujets abordés dans cette leçon, consultez :