Ca y est, notre composant est créé, et nous avons initialisé (grùce au ngOnInit) la liste des Clones pour notre application de la guerre des Clones.
Attaquons-nous maintenant Ă la mise en place du contenu HTML pour le composant en cours.
Pour rappel un Component = une classe Component + une Vue (un template).
Utilisation de TemplateUrl
A la place de définir du contenu Html directement dans le Component :
@Component({
selector: « clonewars-app »,
templateUrl: « <h1>Liste des clones</h1> »
})
export class AppComponent implements OnInit{
âŠ
}
Il va ĂȘtre beaucoup plus intĂ©ressant et plus maintenable de sĂ©parer les responsabilitĂ©s, et donc les fichiers.
Nous allons utiliser le templateUrl Ă la place du Template.
Nous dĂ©finissons lâurl dâune Vue dĂ©diĂ©e pour la gĂ©nĂ©ration du HTML du composant.
Faire attention au chemin relatif
Intuitivement, on pourrait se dire quâon va mettre le chemin relatif, par rapport au AppComponent.
Comme ceci :
@Component({
selector: « clonewars-app »,
templateUrl: « ./app.component.html »
})
export class AppComponent implements OnInit
Or, nous tombons sur une erreur 404, du cÎté client :
Failed to load resource: the server responded with a status of 404 (Not Found)
En fait, il ne trouve pas le fichier, car il le cherche depuis la racine du site web :
http://localhost:3000/app.component.html
En effet, ce fichier ne se trouve pas Ă la racine, mais bien dans le dossier app.
Ce qui nous donne :
@Component({
selector: « clonewars-app »,
templateUrl: « ./app/app.component.html »
})
export class AppComponent implements OnInit
And voila
Mise en place de lâinterpolation
Dans le template utilisé, nous pouvons afficher des propriétés venant du composant.
En fait toute propriĂ©tĂ© (tout champ) du Component peut ĂȘtre affichĂ©e dans la Vue : du moment que lâattribut ne soit pas privĂ©.
Utilisation des doubles accolades
Prenons pas exemple, un titre :
export class AppComponent implements OnInit{
private _clones: Clone[];
private _title = « Les clones »;
ngOnInit(): void {
this._clones = CLONES;
}
// getter for _title property
get title() {
return this._title;
}
// setter for _title property
set title(value) {
this._title = value;
}
âŠ.
}
Nous pouvons alors afficher la propriété title représentant le champ privé _title sur la vue :
<h1>{{title}}</h1>
<div>Prepare for war !</div>
Â
Les deux accolades sont le moyen pour lire la valeur de la propriĂ©tĂ© et lâinjecter dans la vue HTML.
Il sâagit de binding uni-directionnel.
Utilisation des crochets
Prenons maintenant le besoin suivant : nous devons rĂ©cupĂ©rer lâurl dâune image, cette url est une propriĂ©tĂ© de notre Component.
Comment lier cette donnée à la Vue ?
Vous allez utiliser les [] autour de lâattribut du noeud html Ă lier au Component.
Par exemple <img [src]=âcheminImageâ />, oĂč cheminImage est une propriĂ©tĂ© du Composant.
Avec ces crochets, on peut mĂȘme mettre en place des Converter :
<button [style.color]=âestSurveillantEmpereur ? âred: âwhiteââ;
Ici, nous spécifions que le style sera rouge si la propriété estSurveillantEmpereur est vrai.