Référence : https://angular.io/tutorial/first-app/first-app-lesson-04
Angular utilise TypeScript et il est donc normal de pouvoir définir vos types de données avec des interfaces.
Création d'une interface HousingLocation
ng generate interface housinglocation
Cette dernière ligne de commande va créer le fichier src/app/housinglocation.ts
Modifier ce fichier avec le code suivant :
export interface HousingLocation {
id: number;
name: string;
city: string;
state: string;
photo: string;
availableUnits: number;
wifi: boolean;
laundry: boolean;
}
N'oubliez pas d'enregistrer.
Import de l'interface
Dans le fichier app/home/home.component.ts, ajouter le code suivant en haut de fichier :
import { HousingLocation } from '../housinglocation';
Dans le fichier app/home/home.component.ts, ajouter le code suivant en bas de fichier :
export class HomeComponent {
housingLocation: HousingLocation = {
id: 9999,
name: 'Test Home',
city: 'Test city',
state: 'ST',
photo: 'assets/example-house.jpg',
availableUnits: 99,
wifi: true,
laundry: false,
};
}
Import de l'interface, de l'Input et des données dans le component housing-location
import { Component, Input } from '@angular/core';
import { CommonModule } from '@angular/common';
import { HousingLocation } from '../housinglocation';
...
export class HousingLocationComponent {
@Input() housingLocation!: HousingLocation;
}
Images
On comprend que l'on va avoir besoin de fichiers images dans le répertoire "src/assets".
Téléchargez-les et décompressez-les de façon a bien avoir 3 images dans "src/assets".
Property-binding
Modifier le code du fichier /app/home/home.component.ts de la manière suivante : Dans la propriété "template" du décorateur @Component :
<app-housing-location [housingLocation]="housingLocation"></app-housing-location>
Lors de l'ajout d'une liaison de propriété (property-binding) à une balise de composant, nous utilisons la syntaxe [attribut]="valeur" pour notifier à Angular que la valeur attribuée doit être traitée comme une propriété de la classe de composant et non comme une valeur de chaîne.
La valeur à droite est le nom de la propriété du HomeComponent.
Interpolation
L'interpolation va nous permettre d'incorporer des expressions dans des balises.
Pour cela nous allons modifier le fichier src/app/housing-location/housing-location.component.ts
Dans la propriété template du décorateur @Component, remplacer le balisage HTML existant par le code suivant :
template: `
<section class="listing">
<img class="listing-photo" [src]="housingLocation.photo" alt="Exterior photo of {{housingLocation.name}}">
<h2 class="listing-heading">{{ housingLocation.name }}</h2>
<p class="listing-location">{{ housingLocation.city}}, {{housingLocation.state }}</p>
</section>
`,
Le code ci-dessus utilise la liaison de propriété (property binding [ ]) pour lier la propriété "housingLocation.photo" à l'attribut "src". L'attribut alt utilise l'interpolation ainsi que les valeurs du nom, de la ville et de l'état de la propriété housingLocation.
Résultat visuel
N'oubliez pas de lancer le serveur local le cas échéant :
ng serve
Vous devriez obtenir le visuel suivant :
Property-binding vs interpolation
L'interpolation est utilisée pour afficher simplement une donnée en HTML, comme l'affichage d'un titre ou d'un nom.
Le property-binding nous permet de lier une propriété d'un objet DOM, par exemple la propriété cachée, à une valeur de données.
Par exemple le code suivant ne fonctionnera pas correctement :
<button class="primary" type="button" disabled={{isDisable}}>Search</button>
Il faudra lui préférer le code suivant :
<button class="primary" type="button" [disabled]="isDisable">Search</button>
Explication : l'interpolation va toujours transformer la valeur en chaîne de caractères alors que le "property-binding" comprend qu'il doit gérer un type spécifique de données (ici un boolean). Donc lorsque l'on doit manipuler autre chose que des chaînes de caractères, il faut utiliser le "property-binding".