menu FixWins.com Spring MVC Spring Boot NodeJS+ExpressJS+Mysql ReactJS+NodeJS+Mysql Angular Android PFE
Spring MVC Spring Boot NodeJS+ExpressJS+Mysql ReactJS+NodeJS+Mysql Angular PFE

Angular: Directives

folder Projet: angularApp
ce sont des attributs du component qui permet de manipuler les élements du compopnents comme: modifier le style,afficher un contenu ,des conditions,des boucles...

1.if, for, switch

*ngIf

Permet de faire un if dans la partie View

app.component.html

<router-outlet>
<div *ngIf="rep">
<h1>Bien reponse is True</h1>
</div>
<div *ngIf="n==12">
<h1>Ok n=12</h1>
</div>
</router-outlet>

app.component.ts

import { Component } from '@angular/core';

@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
rep:boolean=false;
n:number=12;


}



*ngFor

Permet de faire une boucle for dans la partie View

app.component.html

<router-outlet>
<ul>
<li *ngFor="let ville of ['casabanca', 'Rabat', 'Tanger','Dakhla']; let i=index">
Ville {{ i + 1 }}: {{ ville }}
</li>
</ul>
</router-outlet>

Exemple 2:Avec un tableau d'objet

Remarque: afin de rendre nos interface plus styled on peut installer boostrap :
1.installer bootsrap
Command:
npm install bootstrap --save
2.Ajouter bootsrap dans le fichiers de dépendances angular.json
"styles": [ "src/styles.css", "./node_modules/bootstrap/dist/css/bootstrap.min.css" ],
-Maintenant toutes les components du projet peuvent utilser les classes de bootsrap

app.component.html

<router-outlet>
<div class="container">
<table class="table table-striped">
<tr>
<th>id</th>
<th>Nom</th>
<th>Prénom</th>
<th>Email</th>
</tr>
<tr *ngFor="let etudiant of etudiants; let i=index">
<td>{{i+1}}</td>
<td>{{etudiant.nom}}</td>
<td>{{etudiant.prenom}}</td>
<td>{{etudiant.email}}</td>
</tr>
</table>
</div>
</router-outlet>

app.component.ts

import { Component } from '@angular/core';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
etudiants = [
{"nom": "nom1", "prenom": "prenom1","email": "email1@"},
{"nom": "nom2", "prenom": "prenom2","email": "email2@"},
{"nom": "nom3", "prenom": "prenom3","email": "email3@"}
];

}


*ngSwitchCase

Permet de faire une switch dans la partie View

app.component.ts

import { Component } from '@angular/core';

@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
etudiants = [
{"nom": "nom1", "prenom": "prenom1","email": "email1@","admis":true},
{"nom": "nom2", "prenom": "prenom2","email": "email2@","admis":false},
{"nom": "nom3", "prenom": "prenom3","email": "email3@","admis":"unkown"}
];
}


app.component.html

<router-outlet>
<div class="container">
<table class="table table-striped">
<tr>
<th>id</th>
<th>Nom</th>
<th>Prénom</th>
<th>Email</th>
</tr>
<tr *ngFor="let etudiant of etudiants; let i=index">
<td>{{i+1}}</td>
<td>{{etudiant.nom}}</td>
<td>{{etudiant.prenom}}</td>
<td>{{etudiant.email}}</td>
<td [ngSwitch]=etudiant.admis>
<span *ngSwitchCase=true>Green</span>
<span *ngSwitchCase=false>Red</span>
<span *ngSwitchDefault>Autre</span>
</td>
</tr>
</table>
</div>
</router-outlet>


NgPlural

NgPlural permet d'afficher ou supprimer une base DOM selon la valeur de ses Children ngPluralCase la valeur de ngPluralCase doit être number

app.component.ts

import { Component } from '@angular/core';

@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
user={
age:17,
genre:0,//pour F:1 et M:0
choix:2
}
}




app.component.html

<h3>Genre</h3>
<div [ngPlural]="user.genre">
<ng-template ngPluralCase="=0"><div>Content for Male Client</div></ng-template>
<ng-template ngPluralCase="=1"><div>Content for Female Client</div></ng-template>
<ng-template ngPluralCase="other"><div>Content for other Client</div></ng-template>
</div>
<h3>Age</h3>
<div [ngPlural]="user.age">
<ng-template ngPluralCase=">15"><div>Content for Client age >15</div></ng-template>
<ng-template ngPluralCase="=18"><div>Content for Male Client age=18</div></ng-template>
<ng-template ngPluralCase="other"><div>Content for other Client</div></ng-template>
</div>
<h3>Choix</h3>
<div [ngPlural]="user.choix">
<ng-template ngPluralCase="=1"><div>Content for choix 1</div></ng-template>
<ng-template ngPluralCase="=2"><div>Content for choix 2</div></ng-template>
<ng-template ngPluralCase="other"><div>Content for other choix </div></ng-template>
</div>