Semaine 7 - Components - Données dynamiques
Télécharger : 1 - Théorie Semaine 7 (Structurez avec les components).docx
1 - Structurez avec les components
Partie 1
1. Installer les outils pour utiliser Angular avec SCSS et Bootstrap.
Démarrer votre VM Ubuntu
Préparez le projet
Tout d'abord, créez un nouveau projet sur lequel vous travaillerez tout au long des chapitres suivants. Depuis une ligne de commandes, naviguez vers votre dossier cible et tapez la commande suivante :
sudo ng new Voitures5 --style=scss --skip-tests=true --routing
Si il y a des problème de version (ng version)
ajouter l'argument --routing
Faire avant : sudo ng update @angular/build
Le premier flag (élément de la commande suivant un double tiret --) crée des fichiers .scss pour les styles plutôt que des fichiers .css . Le second flag annule la création des fichiers de test unitaire.
Répondre y (yes/oui) aux deux questions
Maintenant vous pouvez ouvrir le dossier Voitures5 depuis votre éditeur(VSCode)cd.
Dans le terminal à cd Voitures5
Avant de plonger dans les différents dossiers, vous allez exécuter une commande pour installer Bootstrap dans votre projet. Depuis le dossier Voitures5 , avec une ligne de commande, tapez :
sudo npm install bootstrap
Faire la ligne de commande suggérée : npm audit fix –force
Si il y a des erreur ou warning...
*** Dans certain cas il ne faut pas faire la mis-à-jour ***
Ne pas mettre à jour npm
Cette commande téléchargera Bootstrap et l'intégrera dans le package.json du projet. Il vous reste une dernière étape pour l'intégrer à votre projet. Ouvrez le fichier angular.json du dossier source de votre projet. Dans "architect/build/options", modifiez l'array styles comme suit :
Ouvrir VS Code:
AVANT…..peut-être refaire….
Faire: (remplacer /var/mers par votre DocumentRoot)
sudo chmod -R ug+rw /var/mers/angular/Voitures5
sudo chown -R www-data:www-data /var/mers/angular/Voitures5
Maintenant, dans votre code, faire à
"styles": [
"node_modules/bootstrap/dist/css/bootstrap.css",
"styles.scss"
]
Maintenant vous pouvez lancer le serveur de développement local (il faudra le couper avec Ctrl-C et le relancer s'il tournait déjà pour que les changements prennent effet) :
sudo ng serve
Partie 2
1. Créer un component.
La structure des components d'une application Angular
Les components sont les composantes de base d'une application Angular : une application est une arborescence de plusieurs components.
Imaginez la page web suivante :
Tout d'abord, notre AppComponent
Pour cette structure, on peut imaginer un component pour la barre de menu, un autre pour la partie contenue et un dernier pour le menu à droite. Il n'y a pas de règle d'or : je vous montrerai au cours des chapitres suivants comment réfléchir à votre structure afin de trouver la séparation des components la plus pertinente.
Découvrez la structure du code
Le CLI crée énormément de fichiers au moment de la création d'une nouvelle application. Le dossier node_modules contient toutes les dépendances pour votre application : les fichiers source Angular et TypeScript, par exemple.
Le dossier qui vous intéressera principalement est le dossier src , où vous trouverez tous les fichiers sources pour votre application.
Pour commencer à comprendre la structure d'une application Angular, ouvrez index.html dans votre éditeur :
Comme vous pouvez le constater, au lieu d'y voir tout le contenu que nous voyons dans le navigateur, il n'y a que cette balise vide <app-root> : il s'agit d'une balise Angular. Pour en savoir plus, ouvrez le dossier app :
Ce dossier contient le module principal de l'application et les trois fichiers du component principal AppComponent
Ouvrez d'abord le fichier app. :component.html
Ici, vous voyez le code HTML correspondant à ce que vous voyez dans votre navigateur.
Donc comment fait Angular pour injecter ce code dans la balise <app-root> ?
Regardez maintenant dans le fichier app.component.ts :
Ici, à l'intérieur du décorateur @Component() , vous trouvez un objet qui contient les éléments suivants :
· selector : il s'agit du nom qu'on utilisera comme balise HTML pour afficher ce component, comme vous l'avez vu avec <app-root> . Ce nom doit être unique et ne doit pas être un nom réservé HTML de type <div> , <body> etc. On utilisera donc très souvent un préfixe comme app , par exemple ;
· templateUrl : le chemin vers le code HTML à injecter ;
· styleUrls : un array contenant un ou plusieurs chemins vers les feuilles de styles qui concernent ce component ;
Quand Angular rencontre la balise <app-root> dans le document index.html, il sait qu'il doit en remplacer le contenu par celui du template app.component.html , en appliquant les styles app.component.scss , le tout géré par la logique du fichier app.component.ts . Nous verrons ces interactions plus en détail dans les chapitres suivants. Pour faire un premier test, je vous propose de modifier la variable title dans app.component.ts , d'enregistrer le fichier, et de regarder le résultat dans votre navigateur.
export class App {
protected readonly title = signal('Voitures5 de Mers 2026');
}
Créez un component
Vous allez maintenant créer un nouveau component à l'aide du CLI d'Angular. Depuis le dossier principal de votre projet, tapez la commande suivante :
(dans un nouveau terminal ou celui de VSCode)
ng generate component mon-premier--standalone
Comme vous le constaterez, le CLI a créé un nouveau sous-dossier mon-premier et y a créé un fichier template(html), une feuille de styles(scss) et un fichier TypeScrip (ts).un fichier component et un fichier spec : il s'agit d'un fichier de test que vous pouvez supprimer, car vous ne vous en servirez pas dans le cadre de ce cours.
Le CLI a ajouté MonPremier à l'array declarations de votre module (ts). Il a également ajouté le statement import en haut du fichier. Ce sont des étapes nécessaires pour que vous puissiez utiliser votre component au sein de votre application Angular.
Regardez maintenant le fichier mon-premier :.component.ts
Vous constaterez que le CLI a créé un sélecteur : app-mon-premier . Nous pouvons donc utiliser ce sélecteur dans notre code pour y insérer ce component.
Revenez dans app.component.html et modifiez-le comme suit :
<div style="text-align:center">
<h1>
Welcome to {{ title }}!
</h1>
</div>
<app-mon-premier></app-mon-premier>
Pour que le nouveau Component soit visible et utilisable, insérer les deux ligne suivantes dans app.component.ts et enlever le mot "signal"
import { Component, signal } from '@angular/core';
import { MonPremier } from './mon-premier/mon-premier'
import { RouterOutlet } from '@angular/router';
@Component({
selector: 'app-root',
imports: [RouterOutlet,MonPremier],
templateUrl: './app.html',
styleUrl: './app.scss'
})
export class App {
protected readonly title = signal('Voitures5 de Mers 2026');
}
Dans votre navigateur, vous verrez le même titre qu'avant et, sur une deuxième ligne, le texte "mon-premier works" que j'ai changé pour "mon-premier component fonctionne, Youpiiii!!!" . Il s'agit du texte par défaut créé par le CLI que vous trouverez dans mon-premier. : component.html
Félicitations, vous avez créé votre premier component Angular !
Télécharger : 2 - Théorie Semaine 7 (Gérez des données dynamiques).docx
2 - Gérez des données dynamiques
Partie 1
Gérez des données dynamiques (databinding)
Avant de commencer : Faites une copie de votre dossier "Voitures5" et renommer-le "Voitures6"
L'intérêt d'utiliser Angular est de pouvoir gérer le DOM (Document Object Model : les éléments HTML affichés par le navigateur) de manière dynamique, et pour cela, il faut utiliser la liaison de données, ou "databinding".
Le databinding, c'est la communication entre votre code TypeScript et le template HTML qui est montré à l'utilisateur. Cette communication est divisée en deux directions :
- les informations venant de votre code(.ts) qui doivent être affichées dans le navigateur, comme par exemple des informations que votre code a calculé ou récupéré sur un serveur. Les deux principales méthodes pour cela sont le "string interpolation" et le "property binding" ;
- les informations venant du template(.html) qui doivent être gérées par le code : l'utilisateur a rempli un formulaire ou cliqué sur un bouton, et il faut réagir et gérer ces événements. On parlera de "event binding" pour cela.
Il existe également des situations comme les formulaires, par exemple, où l'on voudra une communication à double sens : on parle donc de "two-way binding".
String interpolation
L'interpolation est la manière la plus basique d'émettre des données issues de votre code TypeScript.
Imaginez une application qui vérifie la disponibilité de vos voitures de luxe pour voir s'ils sont disponibles ou non. Créez maintenant un nouveau component marques-voitures-Component avec la commande suivante :
sudo ng generate component marques-voitures
Modifiez ensuite le fichier app.component.ts tel que vue dans "1 - Théorie Semaine 7 (Structurez avec les components).docx"
Ouvrez ensuite marques-voitures. html (dans le nouveau dossier marques-voitures créé par le CLI), supprimez le contenu, et entrez le code ci-dessous :
<li class="list-group-item">
<h4>Ceci est dans Marques-voituresComponent</h4>
</li>
Ensuite, ouvrez app.component.html , et ajouter le contenu comme suit :
<div class="container">
<div class="row">
<div class="col-xs-12">
<h2>Les voitures</h2>
<ul class="list-group">
<app-marques-voitures></app-marques-voitures>
<app-marques-voitures></app-marques-voitures>
<app-marques-voitures></app-marques-voitures>
</ul>
</div>
</div>
</div>
Les classes CSS utilisées ici sont des classes issues de Bootstrap pour simplifier une mise en page propre. Vous trouverez plus d'informations sur bootstrapdocs.com.
Pour que le nouveau Component soit visible et utilisable, insérer les deux ligne suivantes dans app.component.ts
import { Component, signal } from '@angular/core';
import { MonPremier } from './mon-premier/mon-premier';
import { MarquesVoitures } from './marques-voitures/marques-voitures';
import { RouterOutlet } from '@angular/router';
@Component({
selector: 'app-root',
imports: [RouterOutlet,MonPremier,MarquesVoitures],
templateUrl: './app.html',
styleUrl: './app.scss'
})
export class App {
protected readonly title = ('Voitures6 de Mers 2026');
}
Maintenant votre navigateur devrait vous montrer quelque chose comme cela :
Pour l'instant, rien de bien spectaculaire. Vous allez maintenant utiliser l'interpolation pour commencer à dynamiser vos données. Modifiez marques-voitures.html ainsi :
<li class="list-group-item">
<h4>Voiture : {{ voituresName }}</h4>
</li>
Ici, vous trouvez la syntaxe pour l'interpolation : les doubles accolades {{ }} . Ce qui se trouve entre les doubles accolades correspond à l'expression TypeScript que nous voulons afficher, l'expression la plus simple étant une variable. D'ailleurs, puisque la variable voituresName n'existe pas encore, votre navigateur n'affiche rien à cet endroit pour l'instant. Ouvrez maintenant marques-voitures.ts :
Ajoutez maintenant la ligne de code suivante en haut de la déclaration de class :
La déclaration de type ici (les deux-points suivis du type string n'est pas obligatoire, car TypeScript déduit automatiquement le type d'une variable lorsque vous l'instanciez avec une valeur. J'ai simplement inclus la déclaration de type pour montrer la syntaxe TypeScript (vous en aurez besoin dans des chapitres ultérieurs).
Une fois le fichier enregistré, votre navigateur affiche maintenant :
Voilà ! Vous avez maintenant une communication entre votre code TypeScript (.ts) et votre template HTML (.html). Pour l'instant, les valeurs sont codées "en dur", mais à terme, ces valeurs peuvent être calculées par votre code ou récupérées sur un serveur, par exemple. Ajoutez maintenant une nouvelle variable dans votre marques-voitures (.ts) :
voituresName: string = 'Bugatti';
voituresStatus: string = 'Non disponible';
Puis intégrez cette variable dans le template (.html) :
<li class="list-group-item">
<h4>Voiture : {{ voituresName }} -- Statut : {{ voituresStatus }}</h4>
</li>
Votre navigateur montre ceci :
On peut utiliser toute expression TypeScript valable pour l'interpolation. Pour démontrer cela, ajouter une méthode au fichier marques-voitures(.ts) :
Alors que cette méthode ne fait que retourner la même valeur qu'avant, on peut imaginer une situation où elle ferait un appel API, par exemple, qui retournerait le statut de la voiture.
Modifiez maintenant le template(.html) pour prendre en compte ce changement :
<li class="list-group-item">
<h4>Voiture : {{ voituresName }} -- Statut : {{ getStatus() }}</h4>
</li>
Vous devez avoir le même résultat visuel dans le navigateur.
Partie 2
Liaison par propriété (Property binding)
La liaison par propriété ou "property binding" est une autre façon de créer de la communication dynamique entre votre TypeScript(.ts) et votre template(.html) : plutôt qu'afficher simplement le contenu d'une variable, vous pouvez modifier dynamiquement les propriétés d'un élément du DOM en fonction de données dans votre TypeScript.
Pour votre application des voitures, imaginez que si l'utilisateur est authentifié, on lui laisse la possibilité de rendre disponible ou non disponible les voitures. Puisque l'authentification est une valeur globale, ajoutez une variable boolean dans app.ts , votre component de base (vous pouvez supprimer la variable title puisque vous ne l'utilisez plus) :
Ajoutez maintenant un bouton au template global app.component.html , en dessous de la liste de voiture :
<div style="text-align:center">
<h1>
Bienvenue aux {{ title }}!
</h1>
</div>
<app-mon-premier></app-mon-premier>
<div class="container">
<div class="row">
<div class="col-xs-12">
<h2>Les voitures</h2>
<ul class="list-group">
<app-marques-voitures></app-marques-voitures>
<app-marques-voitures></app-marques-voitures>
<app-marques-voitures></app-marques-voitures>
</ul>
<button class="btn btn-success" disabled>Tous disponible </button>
</div>
</div>
</div>
La propriété disabled permet de désactiver le bouton. Afin de lier cette propriété au TypeScript, il faut le mettre entre crochets [] et l'associer à la variable ainsi :
<button class="btn btn-success" [disabled]="!isAuth"> Tous disponible </button>
Le point d'exclamation fait que le bouton est désactivé lorsque isAuth === false . Pour montrer que cette liaison est dynamique, créez une méthode constructor dans app.ts , dans laquelle vous créerez une timeout qui associe la valeur true à isAuth après 4 secondes (pour simuler, par exemple, le temps d'un appel API) :
export class App {
title = ('Voitures6 de Mers 2026');
isAuth = false;
constructor() {
setTimeout(
() => {
this.isAuth = true;
}, 4000
);
}
}
Pour en voir l'effet, rechargez la page dans votre navigateur et observez comment le bouton s'active au bout de quatre secondes.
Si vous utilisez la version Angular cli 20.?.? et plus… c'est possible que les données modifier ne soit pas envoyées automatiquement au template .html
Il faut déclencher manuellement la détection des changements. Si la fonction fléchée ne suffit pas, vous pouvez forcer Angular à exécuter son cycle de détection des changements à l'aide de ChangeDetectorRef.
Solution : Injectez ChangeDetectorRef dans le constructeur de votre composant et appelez markForCheck() (en particulier pour les composants utilisant la détection des changements OnPush) ou detectChanges() dans le rappel setTimeout.
import { Component} from '@angular/core';
import { MonPremier } from './mon-premier/mon-premier';
import { MarquesVoitures } from './marques-voitures/marques-voitures';
import { ChangeDetectorRef } from '@angular/core';
@Component({
selector: 'app-root',
imports: [MonPremier,MarquesVoitures],
templateUrl: './app.html',
styleUrl: './app.scss'
})
export class App {
title = 'Voitures6 de Mers 2026';
isAuth = false;
constructor(private cdr: ChangeDetectorRef) {
setTimeout(
() => {
this.isAuth = true;
this.cdr.detectChanges();
}, 4000
);
}
onAllumer() {
console.log('On rend tout disponible !');
}
}
Pour en voir l'effet, rechargez la page dans votre navigateur et observez comment le bouton s'active au bout de quatre secondes.
Peut-être redémarrer le serveur dans le terminal, <CTRL> + C et sudo ng s
Maintenant c'est vrai….
Pour l'instant le bouton ne fait rien : vous découvrirez comment exécuter du code lorsque l'utilisateur cliquera dessus avec la liaison des événements, ou "event binding".
Liaison d'événements (Event binding)
Avec le string interpolation et le property binding, vous savez communiquer depuis votre code TypeScript vers le template HTML. Maintenant, je vais vous montrer comment réagir dans votre code TypeScript aux événements venant du template HTML.
Actuellement, vous avez un bouton sur votre template qui s'active au bout de 4 secondes. Vous allez maintenant lui ajouter une fonctionnalité liée à l'événement "click" (déclenché quand l'utilisateur clique dessus).
Ajoutez la liaison suivante à votre bouton dans le template HTML (app.component.html):
<div class="container">
<div class="row">
<div class="col-xs-12">
<h2>Les voitures</h2>
<ul class="list-group">
<app-marques-voitures></app-marques-voitures>
<app-marques-voitures></app-marques-voitures>
<app-marques-voitures></app-marques-voitures>
</ul>
<button class="btn btn-success"
[disabled]="!isAuth"
(click)="onAllumer()">Tous disponible</button>
</div>
</div>
</div>
Ici, j'ai choisi de répartir le code sur plusieurs lignes pour le rendre plus lisible. Ce n'est bien sûr pas obligatoire, mais je vous conseille d'y penser quand un objet possède trois propriétés ou plus.
Comme vous pouvez le constater, on utilise les parenthèses () pour créer une liaison à un événement. Pour l'instant, la méthode onAllumer() n'existe pas, donc je vous propose de la créer maintenant dans app.component.ts , en dessous du constructeur.
Il existe une convention de nomenclature pour les méthodes liées aux événements que j'ai employée ici : "on" + le nom de l'événement. Cela permet, entre autres, de suivre plus facilement l'exécution des méthodes lorsque l'application devient plus complexe.
La méthode affichera simplement un message dans la console dans un premier temps :
import { Component } from '@angular/core';
@Component({
selector: 'app-root',
imports: [MonPremier,MarquesVoitures],
templateUrl: './app.html',
styleUrl: './app.scss'
})
export class App {
title = 'Voitures6 de Mers 2026';
isAuth = false;
constructor(private cdr: ChangeDetectorRef) {
setTimeout(
() => {
this.isAuth = true;
this.cdr.detectChanges();
}, 4000
);
}
onAllumer() {
console.log('On rend tout disponible !');
}
}
Enregistrez le fichier, et ouvrez la console dans votre navigateur. Lorsque le bouton s'active, cliquez dessus, et vous verrez votre message apparaître dans la console.
Utiliser F12 ou "ctrl" +"Maj" + "i" pour voir la console !!!
Même si cela reste une fonction très simple pour l'instant, cela vous montre comment lier une fonction TypeScript à un événement venant du template. De manière générale, vous pouvez lier du code à n'importe quelle propriété ou événement des éléments du DOM. Pour plus d'informations, vous pouvez consulter le Mozilla Developer Network ou W3Schools, par exemple.
Partie 3
Liaison à double sens (Two-way binding)
La liaison à double sens (ou two-way binding) utilise la liaison par propriété et la liaison par événement en même temps ; on l'utilise, par exemple, pour les formulaires, afin de pouvoir déclarer et de récupérer le contenu des champs, entre autres.
Pour pouvoir utiliser le two-way binding, il vous faut importer FormsModule depuis @angular/forms dans votre application. Vous pouvez accomplir cela en l'ajoutant à l'array imports de votre marques-voitures.component.ts (sans oublier d'ajouter le statement import correspondant en haut du fichier) dans
marques-voitures.component.ts :
import { Component, Input, OnInit } from '@angular/core';
import { FormsModule} from '@angular/forms';
@Component({
selector: 'app-marques-voitures',
imports: [FormsModule],
templateUrl: './marques-voitures.html',
styleUrl: './marques-voitures.scss',
})
export class MarquesVoitures implements OnInit{
@Input() voituresName: string = 'Bugatti';
@Input() voituresStatus: string = 'Non disponible';
constructor() { }
ngOnInit(): void {
}
getStatus() {
return this.voituresStatus;
}
}
Le two-way binding emploie le mélange des syntaxes de property binding et d'event binding : des crochets et des parenthèses [()] . Pour une première démonstration, ajoutez un <input> dans votre template marques-voitures.component.html et liez-le à la variable voitureName en utilisant la directive ngModel :
<li class="list-group-item">
<h4>Voiture : {{ voituresName }} -- Statut : {{ getStatus() }}</h4>
<input type="text" class="form-control" [(ngModel)]="voituresName">
</li>
Dans votre template, vous verrez un <input> par voiture. Le nom de la voiture est déjà indiqué dedans, et si vous le modifiez, le contenu du <h4> est modifié avec. Ainsi vous voyez également que chaque instance du component voituresComponent est entièrement indépendante une fois créée : le fait d'en modifier une ne change rien aux autres. Ce concept est très important, et il s'agit de l'une des plus grandes utilités d'Angular.
Propriétés personnalisées
Il est possible de créer des propriétés personnalisées dans un component afin de pouvoir lui transmettre des données depuis l'extérieur.
Il est également possible de créer des événements personnalisés, mais ce sujet va au-delà du périmètre de ce cours. Vous trouverez plus d'informations dans la documentation d'Angular.
Pour l'application des voitures, il serait intéressant de faire en sorte que chaque instance de marques-voituresComponent ait un nom différent qu'on puisse régler depuis l'extérieur du code. Pour ce faire, il faut utiliser le décorateur @Input() en remplaçant la déclaration de la variable voituresName :
import { Component, Input, OnInit } from '@angular/core';
@Component({
selector: 'app-marques-voitures',
imports: [],
templateUrl: './marques-voitures.html',
styleUrl: './marques-voitures.scss',
})
export class MarquesVoitures implements OnInit{
@Input() voituresName: string = 'Bugatti';
voituresStatus: string = 'Non disponible';
constructor() { }
ngOnInit(): void {
}
getStatus() {
return this.voituresStatus;
}
}
N'oubliez pas d'importer Input depuis @angular/core en haut du fichier !
Ce décorateur, en effet, crée une propriété voituresName qu'on peut fixer depuis la balise <app-marques-voitures> (app.component.html) :
<div style="text-align:center">
<h1>
Bienvenue aux {{ title }}!
</h1>
</div>
<app-mon-premier></app-mon-premier>
<div class="container">
<div class="row">
<div class="col-xs-12">
<h2>Les voitures</h2>
<ul class="list-group">
<app-marques-voitures voituresName="Bugatti"></app-marques-voitures>
<app-marques-voitures voituresName="Ferrari"></app-marques-voitures>
<app-marques-voitures voituresName="Lambhorgini"></app-marques-voitures>
</ul>
<button class="btn btn-success"
[disabled]="!isAuth"
(click)="onAllumer()">Tous disponible</button>
</div>
</div>
</div>
C'est une première étape intéressante, mais ce serait encore plus dynamique de pouvoir passer des variables depuis AppComponent pour nommer les voitures (on peut imaginer une autre partie de l'application qui récupérerait ces noms depuis un serveur, par exemple). Heureusement, vous savez déjà utiliser le property binding !
Créez d'abord vos trois variables dans AppComponent :
import { Component} from '@angular/core';
import { MonPremier } from './mon-premier/mon-premier';
import { MarquesVoitures } from './marques-voitures/marques-voitures';
import { ChangeDetectorRef } from '@angular/core';
@Component({
selector: 'app-root',
imports: [MonPremier,MarquesVoitures],
templateUrl: './app.html',
styleUrl: './app.scss'
})
export class App {
title = 'Voitures6 de Mers 2026';
isAuth = false;
voituresOne = 'Bugatti';
voituresTwo = 'Ferrari';
voituresThree = 'Lambhorgini';
constructor(private cdr: ChangeDetectorRef) {
setTimeout(
() => {
this.isAuth = true;
this.cdr.detectChanges();
}, 4000
);
}
onAllumer() {
console.log('On rend tout disponible !');
}
}
Vous pouvez également créer une propriété pour régler l'état de la voiture :
Dans: marques-voitures.component.ts
import { Component, Input, OnInit } from '@angular/core';
@Component({
selector: 'app-marques-voitures',
imports: [],
templateUrl: './marques-voitures.html',
styleUrl: './marques-voitures.scss',
})
export class MarquesVoitures implements OnInit{
@Input() voituresName: string = 'Bugatti';
@Input() voituresStatus: string = 'Non disponible';
constructor() { }
ngOnInit(): void {
}
getStatus() {
return this.voituresStatus;
}
}
Ensuite dans le app.component.html
<div style="text-align:center">
<h1>
Bienvenue aux {{ title }}!
</h1>
</div>
<app-mon-premier></app-mon-premier>
<div class="container">
<div class="row">
<div class="col-xs-12">
<h2>Les voitures</h2>
<ul class="list-group">
<app-marques-voitures [voituresName]="voituresOne" [voituresStatus]="'Non disponible'"></app-marques-voitures>
<app-marques-voitures [voituresName]="voituresTwo" [voituresStatus]="'Disponible'"></app-marques-voitures>
<app-marques-voitures [voituresName]="voituresThree" [voituresStatus]="'Non disponible'"></app-marques-voitures>
</ul>
<button class="btn btn-success"
[disabled]="!isAuth"
(click)="onAllumer()">Tous disponible</button>
</div>
</div>
</div>
Notez bien que si vous employez les crochets pour le property binding et que vous souhaitez y passer un string directement, il faut le mettre entre apostrophes, car entre les guillemets, il doit y avoir un statement de TypeScript valable. Si vous omettez les apostrophes, vous essayez d'y passer une variable nommée allumé ou éteint et l'application ne compilera pas.
