Ajouter un paramètre d'input au composant

Cette leçon du tutoriel montre comment créer un input de composant et l'utiliser pour transmettre des données à un composant afin de le personnaliser.

Ce que vous allez apprendre

Le template HousingLocation de votre application dispose d'une propriété HousingLocation pour recevoir des données en entrée.

Aperçu conceptuel des inputs

Les inputs permettent aux composants de spécifier des données qui peuvent leur être transmises par un composant parent.

Dans cette leçon, vous allez définir une propriété input dans le composant HousingLocation, qui vous permet de personnaliser les données affichées dans le composant.

Pour en savoir plus, consultez les guides Accepter des données avec les propriétés d'input et Événements personnalisés avec les outputs.

1. Importer la fonction input()

   Dans l'éditeur de code, importez la fonction utilitaire input depuis @angular/core et l'interface HousingLocationInfo depuis ../housinglocation dans le composant HousingLocation.

   Importer input et HousingLocationInfo dans housing-location.ts

   import {Component, input} from '@angular/core';
   import {HousingLocationInfo} from '../housinglocation';
   
   @Component({
     selector: 'app-housing-location',
     template: ` <p>housing-location works!</p> `,
     styleUrls: ['./housing-location.css'],
   })
   export class HousingLocation {
     housingLocation = input.required<HousingLocationInfo>();
   }

2. Ajouter la propriété d'input

   Ajoutez une propriété obligatoire nommée housingLocation et initialisez-la avec input.required(), avec le type HousingLocationInfo.

   Déclarer la propriété d'input dans housing-location.ts

   import {Component, input} from '@angular/core';
   import {HousingLocationInfo} from '../housinglocation';
   
   @Component({
     selector: 'app-housing-location',
     template: ` <p>housing-location works!</p> `,
     styleUrls: ['./housing-location.css'],
   })
   export class HousingLocation {
     housingLocation = input.required<HousingLocationInfo>();
   }

   Vous devez appeler la méthode required sur input pour indiquer que le composant parent doit fournir une valeur. Dans notre application d'exemple, nous savons que cette valeur sera toujours transmise : c'est voulu. L'appel à .required() garantit que le compilateur TypeScript l'impose et traite la propriété comme non nullable lorsque ce composant est utilisé dans un template.

3. Transmettre des données à l'input

   Envoyez la valeur housingLocation du composant Home vers la propriété housingLocation du composant HousingLocation.

   Déclarer la propriété d'input pour HousingLocation dans home.ts

   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,
     };
   }