Créer le composant HousingLocation de l'application

Cette leçon du tutoriel montre comment ajouter le composant HousingLocation à votre application Angular.

Ce que vous allez apprendre

• Votre application dispose d'un nouveau composant, HousingLocation, qui affiche un message confirmant que le composant a été ajouté à votre application.

1. Créer le HousingLocation

   Dans cette étape, vous créez un nouveau composant pour votre application.

   Dans le panneau Terminal de votre IDE :

   1. Dans le répertoire de votre projet, allez dans le répertoire first-app.

   2. Exécutez cette commande pour créer un nouveau HousingLocation

      ng generate component housingLocation

   3. Exécutez cette commande pour compiler et servir votre application.

      ng serve

      Note : Cette étape concerne uniquement votre environnement local !

   4. Ouvrez un navigateur et allez sur http://localhost:4200 pour trouver l'application.

   5. Vérifiez que l'application se compile sans erreur.

      Utile : Le rendu doit être identique à celui de la leçon précédente car, même si vous avez ajouté un nouveau composant, vous ne l'avez encore inclus dans aucun template de l'application.

   6. Laissez ng serve tourner pendant que vous réalisez les étapes suivantes.

2. Ajouter le nouveau composant à la mise en page de votre application

   Dans cette étape, vous ajoutez le nouveau composant, HousingLocation, au Home de votre application, afin qu'il s'affiche dans la mise en page de votre application.

   Dans le panneau Edit de votre IDE :

   1. Ouvrez home.ts dans l'éditeur.

   2. Dans home.ts, importez HousingLocation en ajoutant cette ligne aux imports du fichier.

      Importer HousingLocation dans src/app/home/home.ts

      import {Component} from '@angular/core';
      import {HousingLocation} from '../housing-location/housing-location';
      
      @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 />
          </section>
        `,
        styleUrls: ['./home.css'],
      })
      export class Home {}

   3. Mettez ensuite à jour la propriété imports des métadonnées @Component en ajoutant HousingLocation au tableau.

      Ajouter HousingLocation au tableau imports dans src/app/home/home.ts

      import {Component} from '@angular/core';
      import {HousingLocation} from '../housing-location/housing-location';
      
      @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 />
          </section>
        `,
        styleUrls: ['./home.css'],
      })
      export class Home {}

   4. Le composant est maintenant prêt à être utilisé dans le template de Home. Mettez à jour la propriété template des métadonnées @Component pour inclure une référence à la balise <app-housing-location>.

      Ajouter housing location au template du composant dans src/app/home/home.ts

      import {Component} from '@angular/core';
      import {HousingLocation} from '../housing-location/housing-location';
      
      @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 />
          </section>
        `,
        styleUrls: ['./home.css'],
      })
      export class Home {}

3. Ajouter les styles du composant

   Dans cette étape, vous copiez dans votre application les styles déjà écrits pour HousingLocation, afin que l'application s'affiche correctement.

   1. Ouvrez src/app/housing-location/housing-location.css et collez-y les styles ci-dessous :

      Note : Dans le navigateur, ils peuvent être placés dans src/app/housing-location/housing-location.ts, dans le tableau styles.

      Ajouter les styles CSS du composant housing location dans src/app/housing-location/housing-location.css

      .listing {
        background: var(--accent-color);
        border-radius: 30px;
        padding-bottom: 30px;
      }
      .listing-heading {
        color: var(--primary-color);
        padding: 10px 20px 0 20px;
      }
      .listing-photo {
        height: 250px;
        width: 100%;
        object-fit: cover;
        border-radius: 30px 30px 0 0;
      }
      .listing-location {
        padding: 10px 20px 20px 20px;
      }
      .listing-location::before {
        content: url('/public/location-pin.svg') / '';
      }
      
      section.listing a {
        padding-left: 20px;
        text-decoration: none;
        color: var(--primary-color);
      }
      section.listing a::after {
        content: '\203A';
        margin-left: 5px;
      }

   2. Enregistrez votre code, revenez au navigateur et vérifiez que l'application se compile sans erreur. Le message housing-location works! doit s'afficher à l'écran. Corrigez les éventuelles erreurs avant de passer à l'étape suivante.