Ajouter un property binding au template d'un composant

Cette leçon du tutoriel montre comment ajouter un property binding à un template et l'utiliser pour transmettre des données dynamiques aux composants.

Ce que vous allez apprendre

• Votre application comporte des bindings de données dans le template de Home.
• Votre application envoie des données de Home vers HousingLocation.

Aperçu conceptuel des inputs

Dans cette leçon, vous allez poursuivre le partage de données du composant parent vers le composant enfant en liant des données à ces propriétés dans le template à l'aide du property binding.

Le property binding vous permet de connecter une variable à un Input dans un template Angular. Les données sont ensuite liées dynamiquement à l'Input.

Pour une explication plus approfondie, consultez le guide Lier des propriétés et des attributs dynamiques.

1. Mettre à jour le template de Home

   Cette étape ajoute un property binding à la balise <app-housing-location>.

   Dans l'éditeur de code :

   1. Allez dans src/app/home/home.ts

   2. Dans la propriété template du décorateur @Component, mettez à jour le code pour qu'il corresponde au code ci-dessous :

      Ajouter le property binding housingLocation

      import {Component} from '@angular/core';
      import {HousingLocation} from '../housing-location/housing-location';
      import {HousingLocationInfo} from '../housinglocation';
      
      @Component({
        selector: 'app-home',
        imports: [HousingLocation],
        template: `
          <section>
            <form>
              <input type="text" placeholder="Filter by city" />
              <button class="primary" type="button">Search</button>
            </form>
          </section>
          <section class="results">
            <app-housing-location [housingLocation]="housingLocation" />
          </section>
        `,
        styleUrls: ['./home.css'],
      })
      export class Home {
        readonly baseUrl = 'https://angular.dev/assets/images/tutorials/common';
      
        housingLocation: HousingLocationInfo = {
          id: 9999,
          name: 'Test Home',
          city: 'Test city',
          state: 'ST',
          photo: `${this.baseUrl}/example-house.jpg`,
          availableUnits: 99,
          wifi: true,
          laundry: false,
        };
      }

      Lorsque nous ajoutons un property binding à la balise d'un composant, nous utilisons la syntaxe [attribute] = "value" pour indiquer à Angular que la valeur affectée doit être traitée comme une propriété de la classe du composant et non comme une chaîne de caractères.

      La valeur à droite est le nom de la propriété de Home.

2. Vérifier que le code fonctionne toujours

   1. Enregistrez vos modifications et vérifiez que l'application ne présente aucune erreur.
   2. Corrigez les éventuelles erreurs avant de passer à l'étape suivante.

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