Notre premier template commence à prendre forme. Nous avons pu y mettre quelques tests autour des événements, avec les parenthèses : (blur) ou (click) par exemple.
Déjà importées depuis BrowserModule
Les directives ngIf et ngFor sont déjà présentes de base dans tous nos composants, car elles présentes dans le module BrowserModule.
BrowserModule que nous avons importé dans le AppModule :
@NgModule({
imports: [BrowserModule],
declarations: [AppComponent],
bootstrap: [AppComponent] // module racine au démarrage
})
export class AppModule {
}
Tester des conditions pour afficher une partie de template : ngIf
Nous souhaitons pouvoir décider si tel bloc Html doit être injecté ou non dans la page de rendu cliente.
Grâce à la directive ngIf, nous allons pouvoir le préciser du côté template.
Prenons le cas que l’on souhaite voir le bloc Html d’un clone si l’arme est renseignée :
<div *ngIf=”clone.weapon”>L’arme a une puissance de {{clone.weapon.power }}</div>
Tout ce contenu HTML sera injecté sur l’on vérifie la condition du *ngIf.
Si on :
- définit une propriété clone2 dans le AppComponent
- attribut une arme au clone : this.clone.weapon = new Gun(« Blaster », 18);
Notre bloc HTML sera injecté : yes !
NOTE: il est très important de mettre l’étoile * devant le ngIf, sinon ça lèvera une erreur.
NOTE 2 : dans le *ngIf, on peut appeler les attributs du Component sans mettre les accolades.
Générer plusieurs fois un même bloc HTML : ngFor
Reprenons notre liste de Clone. Nous souhaitons générer un bloc HTML pour chaque clone dans la liste (dans le tableau que nous avons conçu et renseigné).
C’est ici qu’intervient : *ngFor : il permet de générer un bloc HTML du moment que le *ngFor soit présent.
Le *ngFor est en fait un foreach : pour chaque élément dans notre liste, nous allons pouvoir itérer dessus :
<div *ngFor= »let oneClone of clones » class= »row »>
<p>
{{oneClone.name}}
</p>
</div>
Ici, nous indiquons que le bloc <div de class=”row” est le bloc répétable pour chaque clone présent dans le tableau.
Ici, oneClone est à chaque renseigné avec l’instance du clone à chaque nouvelle itération dans le tableau clones.
Cela nous permet donc d’utiliser et/ou d’afficher les informations pour chaque clone.
NOTE: Le let, est une façon EcmaScript 6 de définir des variables.
Nous verrons plus tard les autres directives.