Année Universitaire : 2020/2021

TP2 Section : 3ING GT TST

Annexe Matière : Web Avancé

1) Créez votre projet

ng new mon-projet
cd mon-projet
ng serve

2) Ajouter un composant à votre application

AppComponent est le component principal : tous les autres components de notre application
seront emboîtés ou "nested" dans celui-ci.
Pour créer un nouveau component à l’aide du CLI d’Angular. Depuis le dossier principal de
votre projet, tapez la commande suivante :

ng generate component Components/mon-premier

#ou bien

ng g module Components

ng generate component Components/mon-premier

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>

Tester l’application

3) Gérez les données

Imaginez une application qui vérifie l’état de vos appareils électriques à la maison pour voir
s’ils sont allumés ou non. Modifiez le contenu du component mon-premier.
Ouvrez ensuite mon-premier.component.html , supprimez le contenu, et entrez le code ci-
dessous :

<li class="list-group-item">

<h4>Ceci est dans AppareilComponent</h4>

</li>

Ensuite, ouvrez app.component.html, et remplacez tout le contenu comme suit :

<div class="container">

<div class="row">

<div class="col-xs-12">

<h2>Mes appareils</h2>
<ul class="list-group">
<app-mon-premier></app-mon-premier>
<app-mon-premier></app-mon-premier>
<app-mon-premier></app-mon-premier>
</ul>
</div>
</div>
</div>

Modifiez Modifiez mon-premier.component.html ainsi :

2
<li class="list-group-item">
<h4>Appareil:{{appareilName}} -- Statut:{{appareilStatus }}</h4>
</li>

Interpolation : les doubles accolades {{ }} => Ce qui se trouve entre les doubles accolades
correspond à l'expression TypeScript que nous voulons afficher.
Ajoutez dans le fichier mon-premier.component.ts:

export class MonPremierComponent implements OnInit { // ajoutez deux lignes

appareilName: string = 'Machine à laver';

appareilStatus: string = 'éteint';

constructor() { }

Property binding
Pour l’application des appareils électriques, imaginez que si l'utilisateur est authentifié, on lui
laisse la possibilité d'allumer tous les appareils de la maison.
Puisque l'authentification est une valeur globale, ajoutez une variable boolean dans
AppComponent :

export class AppComponent {

…
isAuth = false; // Ajoutez cette ligne
}

Ajoutez maintenant un bouton au template global app.component.html:

<div class="container">
….
</ul>

<button class="btn btn-success" disabled>Tout

3
allumer</button> // Ajoutez cette balise

</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">Tout allume</button>

Pour montrer que cette liaison est dynamique, créez une méthode constructor dans
AppComponent , 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 AppComponent {

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.
4
Event binding : 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. On utilise les parenthèses
() pour créer une liaison à un événement.

<button class="btn btn-success" [disabled]="!isAuth" (click)="onAllumer()">Tout

allumer</button>

Ajoutez la méthode onAllumer() dans app.component.ts , en dessous du constructeur.

onAllumer() {

new alert("Bravo !!!");

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.
Pour l’application des appareils électriques, il serait intéressant de faire en sorte que chaque
appareil 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 appareilName.

@Input() appareilName: string;

@Input() appareilStatus: string;

Créez d’abord vos trois variables dans AppComponent :

appareilOne = 'Machine à laver';

5
appareilTwo = 'Frigo';

appareilThree = 'Ordinateur';

Maintenant, utilisez les crochets [] pour lier le contenu de ces variables à la propriété du
component :

<app-mon-premier [appareilName]="appareilOne" [appareilStatus]="'éteint'"></app-mon-

premier>

<app-mon-premier [appareilName]="appareilTwo" [appareilStatus]="'éteint'"></app-mon-

premier>

<app-mon-premier [appareilName]="appareilThree" [appareilStatus]="'allumé'"></app-mon-

premier>

4) Structurez le document avec des Directives

<li class="list-group-item">

<div style="width:20px; height:20px; background-color:red;"

*ngIf="appareilStatus === 'éteint'"></div>

<h4>Appareil : {{ appareilName }} -- Statut : {{ getStatus) }}</h4> </li>