Présentation d'Angular

1. Présentation

Ce que vous allez faire

Dans cet atelier de programmation, vous allez créer une application de logement avec Angular. Une fois l'application terminée, vous pourrez afficher des fiches d'accueil en fonction des recherches des utilisateurs, et consulter les détails d'un emplacement de logement.

Vous allez tout développer avec Angular à l'aide des outils puissants d'Angular et d'une excellente intégration du navigateur.

C'est l'appli que vous allez créer aujourd'hui

Points abordés

• Utiliser la CLI Angular pour structurer un nouveau projet
• Utiliser les composants Angular pour créer une interface utilisateur
• Partager des données dans des composants et d'autres parties d'une application
• Utiliser les gestionnaires d'événements dans Angular
• Déploiement de l'application sur Firebase Hosting à l'aide de la CLI Angular

Ce dont vous avez besoin

• Connaissances de base en HTML, CSS, TypeScript (ou JavaScript), Git et dans la ligne de commande

2. Configuration de l'environnement

Configurer votre environnement local

Pour cet atelier de programmation, vous devez installer le logiciel suivant sur votre ordinateur local:

• Node (Version) ^12.20.2, ^14.15.5 ou ^16.10.0.
• Éditeur de code : VS Code ou un autre éditeur de code de votre choix
• Plug-in Angular Language Service pour VS Code

Installer la CLI Angular

Une fois toutes vos dépendances configurées, vous pouvez installer la CLI Angular à partir d'une fenêtre de ligne de commande sur votre ordinateur:

npm install -g @angular/cli

Pour vérifier que votre configuration est correcte, exécutez cette commande à partir de la ligne de commande de votre ordinateur:

ng –version

Si la commande fonctionne, un message semblable à la capture d'écran ci-dessous s'affiche.

Obtenir le code

Le code de cet atelier de programmation contient les étapes intermédiaires et la solution finale dans différentes branches. Pour commencer, téléchargez le code depuis GitHub

1. Ouvrez un nouvel onglet dans votre navigateur pour accéder à https://github.com/angular/introduction-to-angular.
2. À partir d'une fenêtre de ligne de commande, copiez le dépôt et clonez le dépôt cd introduction-to-angular/ dans le dépôt.
3. Dans la branche de code de démarrage, saisissez git checkout get-started.
4. Ouvrez le code dans l'éditeur de code de votre choix, puis ouvrez le dossier du projet introduction-to-angular.
5. Dans la fenêtre de ligne de commande, exécutez npm install pour installer les dépendances requises pour l'exécution du serveur.
6. Pour exécuter le serveur Web Angular en arrière-plan, ouvrez une fenêtre de ligne de commande distincte, puis exécutez ng serve pour démarrer le serveur.
7. Ouvrez http://localhost:4200 dans un nouvel onglet de votre navigateur.

Une fois l'application opérationnelle, vous pouvez commencer à développer l'application Fairhouse.

3. Créer votre premier composant

Les composants sont les composants fondamentaux des applications Angular. Considérez les composants comme des briques utilisées pour la construction. Au début, un briques n'a pas beaucoup de puissance, mais lorsqu'il est associé à d'autres briques, vous pouvez construire des structures remarquables.

Il en va de même pour les applications développées avec Angular.

Les composants ont trois aspects principaux:

• Fichier HTML du modèle.
• Un fichier CSS pour les styles.
• Fichier TypeScript pour le comportement de l'application

Le premier composant que vous allez mettre à jour est AppComponent.

1. Ouvrez app.component.html dans votre éditeur de code. Il s'agit du modèle de fichier pour AppComponent.
2. Supprimez l'ensemble du code de ce fichier et remplacez-le par le code suivant:

<main>
  <header><img src="../assets/logo.svg" alt="fairhouse">Fairhouse</header>
  <section>
  </section>
</main>

3. Enregistrez le code et vérifiez le navigateur. Une fois le serveur de développement en cours d'exécution, les modifications sont répercutées dans le navigateur au moment de l'enregistrement.

Félicitations, vous venez de mettre à jour votre première application Angular et de trouver de nouvelles fonctionnalités fantastiques à l'avenir. Continuons.

Vous allez maintenant ajouter un champ de texte pour les recherches et un bouton dans l'interface utilisateur.

Les composants ont de nombreux avantages, dont la possibilité d'organiser l'interface utilisateur. Vous allez créer un composant contenant le champ de texte, le bouton de recherche et, à terme, la liste des emplacements.

Pour créer ce composant, vous devez utiliser la CLI Angular. La CLI Angular est un ensemble d'outils de ligne de commande qui facilite l'échafaudage, le déploiement et plus encore.

1. Dans la ligne de commande, saisissez:

ng generate component housing-list

Voici les parties de cette commande:

• ng est la CLI Angular.
• La commande génère le type d'action à effectuer. Dans ce cas, générez un échafaudage pour quelque chose.
• Composant ""que nous souhaitons créer".
• home-list est le nom du composant.

2. Ensuite, ajoutez le nouveau composant au modèle AppComponent. Dans app.component.html, mettez à jour le code du modèle:

<main>
  <header><img src="../assets/logo.svg" alt="fairhouse">Fairhouse</header>
 <section>
   <app-housing-list></app-housing-list>
 </section>
</main>

3. Enregistrez tous les fichiers et revenez dans le navigateur pour confirmer que le message housing-list works s'affiche.
4. Dans l'éditeur de code, accédez à housing-list.component.html, supprimez le code existant et remplacez-le par:

<label for="location-search">Search for a new place</label>
<input id="location-search" placeholder="Ex: Chicago"><button>Search</button>

5. Dans housing-list.component.css, ajoutez les styles suivants:

input, button {
    border: solid 1px #555B6E;
    border-radius: 2px;
    display: inline-block;
    padding: 0;
}
input {
    width: 400px;
    height: 40px;
    border-radius: 2px 0 0 2px;
    color: #888c9c;
    border: solid 1px #888c9c;
    padding: 0 5px 0 10px;
}

button {
    width: 70px;
    height: 42px;
    background-color: #4468e8;
    color: white;
    border: solid 1px #4468e8;
    border-radius: 0 2px 2px 0;
}

article {
    margin: 40px 0 10px 0;
    color: #202845;
}
article, article > p {
    color: #202845;
}

article> p:first-of-type {
    font-weight: bold;
    font-size: 22pt;
}

img {
    width: 490px;
    border-radius: 5pt;
}

label {
    display: block;
    color: #888c9c;
}

6. Enregistrez les fichiers, puis revenez dans le navigateur.

Notre application Angular commence à prendre une forme particulière.

4. Gestion des événements

L'application ne comporte pas de champ ni de bouton, mais ne contient pas l'interaction. Sur le Web, vous interagissez généralement avec des commandes, et vous appelez l'utilisation d'événements et de gestionnaires d'événements. Vous utiliserez cette stratégie pour créer votre application.

Vous allez effectuer ces modifications dans housing-list.component.html.

Pour ajouter un gestionnaire de clics, vous devez ajouter l'écouteur d'événements au bouton. Dans Angular, la syntaxe consiste à placer le nom de l'événement entre parenthèses et à lui attribuer une valeur. Ici, vous devez nommer la méthode qui est appelée lorsque l'utilisateur clique sur le bouton. Appelons-le searchHousingLocations. N'oubliez pas d'ajouter les parenthèses à la fin de ce nom de fonction pour l'appeler.

1. Modifiez le code du bouton pour qu'il corresponde à celui-ci:

<button (click)="searchHousingLocations()">Search</button>

2. Enregistrez ce code et vérifiez le navigateur. Erreur de compilation:

L'application génère cette erreur, car la méthode searchHousingLocations n'existe pas. Vous devez donc la modifier.

3. Dans housing-list.component.ts, ajoutez une méthode à la fin du corps de la classe HousingListComponent:

 searchHousingLocations() {}

Vous allez bientôt renseigner les informations relatives à cette méthode.

4. Enregistrez ce code pour mettre à jour le navigateur et résoudre l'erreur.

L'étape suivante consiste à obtenir la valeur du champ de saisie et à la transmettre en tant qu'argument à la méthode searchHousingLocations. Vous allez utiliser une fonctionnalité Angular appelée "variable de modèle", qui permet d'obtenir une référence à un élément dans un modèle et d'interagir avec celui-ci.

1. Dans housing-list.component.html, ajoutez un attribut appelé search, avec un hashtag comme préfixe à l'entrée.

<label for="location-search">Search for a new place</label>
<input id="location-search" #search><button (click)="searchHousingLocations()">Search</button>

Nous disposons désormais d'une référence à l'entrée. Nous avons également accès à la propriété .value de l'entrée.

2. Transmettez la valeur de l'entrée à la méthode searchHousingLocations.

<input id="location-search" #search><button (click)="searchHousingLocations(search.value)">Search</button>

Jusqu'à présent, vous transmettiez la valeur en tant que paramètre, mais ajoutons une méthode pour utiliser le paramètre. Pour le moment, ce paramètre est utilisé dans une commande console.log. Plus tard, il est utilisé comme paramètre de recherche.

3. Dans housing-list.component.ts, ajoutez le code suivant:

 searchHousingLocations(searchText: string) {
   console.log(searchText);
 }

4. Enregistrez le code, puis, dans le navigateur, ouvrez les outils pour les développeurs Chrome et accédez à l'onglet Console. Saisissez une valeur. Sélectionnez Search (Rechercher) et vérifiez que la valeur s'affiche dans l'onglet Console (Console) des outils pour les développeurs Chrome.

Vous avez ajouté un gestionnaire d'événements et votre application peut accepter les entrées des utilisateurs.

5. Résultats de recherche

L'étape suivante consiste à afficher les résultats en fonction de l'entrée utilisateur. Chaque emplacement comporte des propriétés de chaîne pour le nom, la ville, l'État, la photo, un nombre pour les unités disponibles, ainsi que deux propriétés booléennes pour la blanchisserie et le Wi-Fi:

name: "Location One",
city: "Chicago",
state: "IL",
photo: "/path/to/photo.jpg",
availableUnits: 4,
wifi: true,
laundry: true

Vous pouvez représenter ces données en tant qu'objet JavaScript simple, mais il est préférable d'utiliser la prise en charge de TypeScript dans Angular. Utilisez les types pour éviter les erreurs pendant la compilation.

Nous pouvons utiliser des types pour définir les caractéristiques des données, également appelées "ajustement des données". Dans TypeScript, les interfaces sont couramment utilisées à cette fin. Créons une interface représentant nos données de localisation de logement. Dans le terminal de l'éditeur, utilisez la CLI Angular pour créer un type "HousingLocation".

1. Pour ce faire, saisissez:

ng generate interface housing-location

2. Dans housing-location.ts, ajoutez les détails du type pour notre interface. Accordez le type approprié à chaque propriété en fonction de sa conception:

export interface HousingLocation {
  name: string,
  city: string,
  state: string,
  photo: string,
  availableUnits: number,
  wifi: boolean,
  laundry: boolean,
}

3. Enregistrez le fichier et ouvrez app.component.ts.
4. Pour créer un tableau contenant des données représentant les emplacements des logements, importez l'interface des emplacements immobiliers à partir de ./housing-location.

import { HousingLocation } from './housing-location';

5. Mettez à jour la classe AppComponent pour inclure une propriété appelée housingLocationList de type HousingLocation[]. Complétez le tableau avec les valeurs suivantes:

housingLocationList: HousingLocation[] = [
  {
    name: "Acme Fresh Start Housing",
    city: "Chicago",
    state: "IL",
    photo: "../assets/housing-1.jpg",
    availableUnits: 4,
    wifi: true,
    laundry: true,
  },
  {
    name: "A113 Transitional Housing",
    city: "Santa Monica",
    state: "CA",
    photo: "../assets/housing-2.jpg",
    availableUnits: 0,
    wifi: false,
    laundry: true,
  },
  {
    name: "Warm Beds Housing Support",
    city: "Juneau",
    state: "AK",
    photo: "../assets/housing-3.jpg",
    availableUnits: 1,
    wifi: false,
    laundry: false,
  }
];

Inutile d'instancier de nouvelles instances d'une classe pour obtenir des objets. Nous pouvons exploiter les informations fournies par l'interface concernant les types. Les données de nos objets doivent être identiques, c'est-à-dire correspondre aux propriétés définies dans l'interface.

Les données sont stockées dans app.component.ts, mais nous devons les partager avec d'autres composants. Une solution consiste à utiliser des services dans Angular, mais pour réduire la complexité de l'application, nous utiliserons le décorateur d'entrée fourni par Angular. Le décorateur d'entrée permet à un composant de recevoir une valeur d'un modèle. Vous l'utiliserez pour partager le tableau housingLocationList avec HousingListComponent.

6. Dans housing-list.component.ts, importez input à partir de @angular/core et HousingLocation à partir de ./housingLocation.

import { Component, OnInit, Input } from '@angular/core';
import {HousingLocation } from '../housing-location';

7. Créez une propriété appelée locationList dans le corps de la classe du composant. Vous allez utiliser Input comme décorateur pour locationList.

export class HousingListComponent implements OnInit {

  @Input() locationList: HousingLocation[] = [];
  ...
}

Le type de cette propriété est défini sur HousingLocation[].

8. Dans app.component.html, mettez à jour l'élément app-housing-list pour inclure un attribut appelé locationList et définissez la valeur sur housingLocationList.

<main>
 ...
 <app-housing-list [locationList]="housingLocationList"></app-housing-list>
</main>

L'attribut locationList doit être placé entre crochets ([ ]) afin qu'Angular puisse lier de manière dynamique la valeur de la propriété locationList avec une variable ou une expression. Sinon, Angular traite la valeur du côté droit du signe égal comme une chaîne.

Si vous rencontrez des erreurs à ce stade, vérifiez les points suivants:

• L'orthographe du nom de l'attribut d'entrée correspond à l'orthographe utilisée dans la propriété de la classe TypeScript. Le cas est également important.
• Le nom de la propriété situé à droite du signe égal est correctement orthographié.
• La propriété d'entrée est placée entre crochets.

La configuration du partage des données est terminée. L'étape suivante consiste à afficher les résultats dans le navigateur. Les données étant au format tableau, nous devons utiliser une fonctionnalité Angular qui vous permet de parcourir les données et de répéter les éléments dans les modèles, *ngFor.

1. Dans housing-list.component.html, mettez à jour l'élément d'article dans le modèle pour utiliser *ngFor afin de pouvoir afficher les entrées du tableau dans le navigateur:

<article *ngFor="let location of locationList"></article>

La valeur attribuée à l'attribut ngFor est la syntaxe de modèle Angular. Une variable locale est créée dans le modèle. Angular utilise la variable locale dans le champ d'application de l'élément article entre les balises d'ouverture et de fermeture.

Pour en savoir plus sur ngFor et la syntaxe du modèle, consultez la documentation Angular.

Le ngFor répète un élément d'article pour chaque entrée du tableau locationList. Vous allez ensuite afficher les valeurs de la variable "location".

2. Modifiez le modèle pour ajouter un élément de paragraphe(<p>). L'enfant de l'élément de paragraphe est une valeur interpolée à partir de la propriété de localisation:

<input #search><button (click)="searchHousingLocations(search.value)">Search</button>
<article *ngFor="let location of locationList">
   <p>{{location.name}}</p>
</article>

Dans les modèles Angular, vous pouvez utiliser l'interpolation de texte pour afficher les valeurs à l'aide de la syntaxe avec deux accolades ( {{ }}).

3. Enregistrez et revenez dans le navigateur. Désormais, l'application affichera un libellé pour chaque entrée de tableau dans le tableau locationList.

Les données sont partagées entre le composant de l'application et le composant de la liste des logements, et nous itérons sur chacune de ces valeurs pour les afficher dans le navigateur.

Nous venons de voir quelques manières de partager des données entre composants, d'utiliser une nouvelle syntaxe de modèle et d'utiliser l'instruction ngFor.

6. Filtrer les résultats de recherche

Actuellement, l'application affiche tous les résultats au lieu des résultats basés sur la recherche d'un utilisateur. Pour modifier cela, vous devez mettre à jour le HousingListComponent afin que l'application puisse fonctionner comme prévu.

1. Dans housing-list.component.ts, mettez à jour le HousingListComponent pour avoir une nouvelle propriété appelée results de type HousingLocation[]:

export class HousingListComponent implements OnInit {

 @Input() locationList: HousingLocation[] = [];
 results: HousingLocation[] = [];
 ...

Le tableau des résultats représente les emplacements immobiliers qui correspondent aux recherches des utilisateurs. L'étape suivante consiste à mettre à jour la méthode searchHousingLocations pour filtrer les valeurs.

2. Supprimez le console.log et mettez à jour le code pour affecter la propriété des résultats à la sortie de filtre locationList, filtrée par searchText:

searchHousingLocations(searchText: string) {
  this.results = this.locationList.filter(
  (location: HousingLocation) => location.city
    .toLowerCase()
    .includes(
        searchText.toLowerCase()
  ));
}

Dans ce code, nous utilisons la méthode de filtrage de tableau et n'acceptons que les valeurs contenant la propriété searchText. Toutes les valeurs sont comparées à l'aide des versions minuscules des chaînes.

Deux points à noter :

• Le préfixe this doit être utilisé pour faire référence aux propriétés d'une classe au sein des méthodes. C'est pourquoi nous utilisons this.results et this.locationList.
• La fonction de recherche ici ne correspond qu'à la propriété de ville d'un lieu, mais vous pouvez mettre à jour le code pour inclure plus de propriétés.

Bien que ce code fonctionne tel quel, vous pouvez l'améliorer.

3. Mettez à jour le code pour empêcher la recherche dans le tableau si le champ searchText est vide:

searchHousingLocations(searchText: string) {
  if (!searchText) return;
  ...
}

La méthode a été mise à jour et vous devez modifier le modèle avant d'afficher les résultats dans le navigateur.

4. Dans housing-location.component.html, remplacez locationList par results dans ngFor:

<article *ngFor="let location of results">...</article>

5. Enregistrez le code et revenez dans le navigateur. À l'aide de l'entrée, recherchez un lieu à partir des données de l'exemple (par exemple, Chicago).

L'application affiche uniquement les résultats correspondants:

Vous venez de terminer la fonctionnalité supplémentaire nécessaire pour associer complètement l'entrée utilisateur aux résultats de recherche. L'application est presque terminée.

Vous allez maintenant afficher plus de détails sur l'application.

7. Afficher les détails

L'application doit permettre de cliquer sur un résultat de recherche et d'afficher les informations dans un panneau d'informations. Le HousingListComponent sait quel résultat a enregistré un clic depuis que les données s'affichent dans ce composant. Nous avons besoin d'un moyen de partager les données de HousingListComponent avec le composant parent AppComponent.

Dans Angular, @Input() envoie des données de l'enfant à l'enfant, tandis que @Output() permet aux composants d'envoyer un événement avec les données de l'enfant au composant parent. Le décorateur Output utilise un EventEmitter pour notifier les écouteurs des événements. Dans ce cas, vous devez émettre un événement représentant le clic d'un résultat de recherche. Parallèlement à l'événement de sélection, vous souhaitez envoyer l'élément sélectionné dans la charge utile.

1. Dans housing-list.component.ts, mettez à jour le import pour inclure Output et EventEmitter de @angular/core et HousingLocation à partir de son emplacement:

import { Component, OnInit, Input, Output, EventEmitter } from '@angular/core';
import { HousingLocation } from '../housing-location';

2. Dans le corps de HousingListComponent, mettez à jour le code pour ajouter une nouvelle propriété appelée locationSelectedEvent de type EventEmitter<HousingLocation>();:

@Output() locationSelectedEvent = new EventEmitter<HousingLocation>();

La propriété locationSelectedEvent est décorée avec @Output(), ce qui en fait l'élément de l'API de ce composant. Avec EventEmitter, vous pouvez utiliser l'API générique pour la classe en lui fournissant le type HousingLocation. Lorsqu'un événement est émis par locationSelectedEvent, les écouteurs de l'événement peuvent s'attendre à ce que toutes les données associées soient de type HousingLocation. Il s'agit du niveau de sécurité adapté au développement et à la réduction du risque d'erreurs.

Nous devons déclencher l'événement locationSelectedEvent chaque fois qu'un utilisateur clique sur un établissement de la liste.

3. Mettez à jour HousingListComponent pour ajouter une méthode appelée selectLocation qui accepte une valeur de type housingLocation en tant que paramètre:

selectHousingLocation(location: HousingLocation) { }

4. Dans le corps de la méthode, émettez un nouvel événement à partir de l'émetteur locationSelectedEvent. La valeur émise est l'emplacement sélectionné par l'utilisateur.

selectHousingLocation(location: HousingLocation) {
  this.locationSelectedEvent.emit(location);
}

Associez-le au modèle.

5. Dans housing-list-component.html, ajoutez un élément enfant au bouton avec un click event. Cet événement appelle la méthode selectHousingLocation dans la classe TypeScript et transmet une référence au location sélectionné en tant qu'argument.

<article *ngFor="let location of results" >
  <p>{{location.name}}</p>
  <button (click)="selectHousingLocation(location)">View</button>
</article>

Les emplacements des logements disposent désormais d'un bouton cliquable, et vous transmettez ces valeurs au composant.

La dernière étape de cette procédure consiste à mettre à jour le AppComponent pour écouter l'événement et à mettre à jour l'affichage en conséquence.

6. Dans app.component.html, mettez à jour l'élément app-housing-list pour écouter locationSelectedEvent et gérer l'événement avec la méthode updateSelectedLocation:

<app-housing-list [locationList]="housingLocationList" (locationSelectedEvent)="updateSelectedLocation($event)"></app-housing-list>

La classe $event est fournie par Angular lors de la gestion des gestionnaires d'événements dans les modèles. L'argument $event est un objet de type HousingLocation, car il s'agit de la valeur que nous allons définir pour le paramètre de type EventEmitter's. Angular s'en charge pour vous. Il vous suffit de vérifier que vos modèles sont corrects.

7. Dans app.component.ts, mettez à jour le code pour inclure une nouvelle propriété appelée selectedLocation de type HousingLocation | undefined.

selectedLocation: HousingLocation | undefined;

Ce paramètre utilise une fonctionnalité TypeScript appelée Union Type. Les unions permettent aux variables d'accepter l'un des types. Dans ce cas, vous souhaitez que la valeur de selectedLocation soit HousingLocation ou undefined, car vous ne spécifiez pas de valeur par défaut pour selectedLocation.

Vous devez mettre en œuvre updateSelectedLocation.

8. Ajoutez une méthode appelée updateSelection avec le paramètre location et le type HousingLocation.

updateSelectedLocation(location: HousingLocation) { } searchHousingLocations() {}

9. Dans le corps de la méthode, définissez la valeur de selectedLocation sur le paramètre location:

updateSelectedLocation(location: HousingLocation) {
  this.selectedLocation = location;
}

Une fois cette partie terminée, la dernière étape consiste à mettre à jour le modèle pour afficher l'emplacement sélectionné.

10. Dans app.component.html, ajoutez un nouvel élément <article> qui permettra d'afficher les propriétés du lieu sélectionné. Modifiez le modèle avec le code suivant:

<article>
  <img [src]="selectedLocation?.photo">
  <p>{{selectedLocation?.name}}</p>
  <p>{{selectedLocation?.availableUnits}}</p>
  <p>{{selectedLocation?.city}}, {{selectedLocation?.state}}</p>
  <p>{{selectedLocation?.laundry ? "Has laundry" : "Does Not have laundry"}}</p>
  <p>{{selectedLocation?.wifi ? "Has wifi" : "Does Not have wifi"}}</p>
 </article>

Étant donné que selectedLocation peut être undefined, vous devez utiliser l'opérateur de chaîne facultatif pour récupérer les valeurs de la propriété. Vous utilisez également la syntaxe ternaire pour les valeurs booléennes wifi et laundry. Vous avez ainsi la possibilité d'afficher un message personnalisé, en fonction de la valeur.

11. Enregistrez le code et vérifiez le navigateur. Recherchez un lieu et cliquez dessus pour afficher les détails:

Voilà qui est très bien, mais il reste un problème à résoudre. Lors du chargement initial de la page, certains artefacts de texte du panneau des détails ne doivent pas s'afficher. Angular propose un moyen d'afficher de manière conditionnelle le contenu que vous utiliserez à l'étape suivante.

Pour l'instant, nous sommes ravis de l'avancée du projet. Voici ce que vous avez implémenté jusqu'à présent:

• Vous pouvez partager les données des composants enfants avec les composants parents à l'aide du décorateur de sortie et de l'émetteur EventEmitter.
• Vous avez également autorisé vos utilisateurs à saisir une valeur et à effectuer une recherche à l'aide de cette valeur.
• L'application peut afficher les résultats de recherche, et les utilisateurs peuvent cliquer pour en savoir plus.

Excellent travail jusqu'à présent. Veuillez mettre à jour les modèles et terminer l'application.

8. Polisser les modèles

L'interface utilisateur contient actuellement des artefacts de texte du panneau des détails qui doivent s'afficher de manière conditionnelle. Nous allons utiliser deux fonctionnalités Angular, ng-container et *ngIf.

Si vous appliquez directement l'instruction ngIf à l'élément article, cela entraîne un décalage de mise en page lorsque l'utilisateur effectue la première sélection. Pour améliorer cette expérience, vous pouvez encapsuler les détails de la position dans un autre élément qui est un enfant du article. Cet élément n'a ni style, ni fonction, et ajoute simplement une pondération au DOM. Pour éviter cela, vous pouvez utiliser ng-container. Vous pouvez lui appliquer des instructions, mais elles ne seront pas visibles dans le DOM final.

1. Dans app.component.html, mettez à jour l'élément article pour qu'il corresponde au code suivant:

<article>
  <ng-container>
  <img [src]="selectedLocation?.photo">
  <p>{{selectedLocation?.name}}</p>
  <p>{{selectedLocation?.city}}, {{selectedLocation?.state}}</p>
  <p>Available Units: {{selectedLocation?.availableUnits}}</p>
  <p>{{selectedLocation?.laundry ? "Has laundry" : "Does Not have laundry"}}</p>
  <p>{{selectedLocation?.wifi ? "Has wifi" : "Does Not have wifi"}}</p>
  </ng-container>
</article>

2. Ensuite, ajoutez l'attribut *ngIf à l'élément ng-container. La valeur doit être selectedLocation.

<article>
  <ng-container *ngIf="selectedLocation">
  ...
  </ng-container>
</article>

Désormais, l'application affiche le contenu de l'élément ng-container uniquement si selectedLocation est Vrai.

3. Enregistrez ce code et vérifiez que le navigateur n'affiche plus les artefacts de texte lors du chargement de la page.

Une dernière mise à jour peut être apportée à notre application. Les résultats de recherche dans housing-location.component.html devraient afficher plus de détails.

4. Dans housing-location.component.html, remplacez le code par:

<label for="location-search">Search for a new place</label>
<input id="location-search" #search placeholder="Ex: Chicago"><button
    (click)="searchHousingLocations(search.value)">Search</button>
<article *ngFor="let location of results" (click)="selectHousingLocation(location)">
  <img [src]="location.photo" [alt]="location.name">
  <p>{{location.name}}</p>
  <p>{{location.city}}, {{location.state}}</p>
  <button (click)="selectHousingLocation(location)">View</button>
</article>

5. Enregistrez le code et revenez dans le navigateur pour faire apparaître l'application terminée.

L'application a désormais l'air très efficace. Bien joué.

9. Félicitations

Merci d'avoir suivi cette aventure et d'utiliser Angular pour créer Fairhouse.

Vous avez créé une interface utilisateur à l'aide d'Angular. À l'aide de la CLI Angular, vous avez créé des composants et des interfaces. Vous avez ensuite utilisé les puissantes fonctionnalités de modèle dans Angular pour créer une application fonctionnelle qui affiche des images, gère des événements et bien plus encore.

Étape suivante

Si vous souhaitez continuer à créer des fonctionnalités, voici quelques idées:

• Les données sont codées en dur dans l'application. Nous vous recommandons d'ajouter un service qui doit contenir les données.
• La page d'informations est actuellement affichée sur la même page, mais il peut être intéressant de la déplacer vers sa propre page et de profiter du routage Angular.
• Une autre mise à jour consiste à héberger les données sur un point de terminaison au repos et à utiliser le package HTTP dans Angular pour charger les données au moment de l'exécution.

Beaucoup d'opportunités de divertissement.