Atelier de développement 2Ginfo

Solutionnaire : TP 1

Exercice 1 :

Essayer d’exécuter les éléments de code suivant :

Dans cet exemple on essaye d’afficher l’ensemble des éléments d’une liste de voiture.

On crée une nouvelle classe avec la commande suivante :

ng generate class classes/voiture --skipTests=true

Contenu de voiture.ts
export class Voiture {
constructor(private _mat?: number, private _marque?: string) { }
get mat(): number | undefined {
return this._mat;
}
set mat(_mat: number | undefined) {
this._mat =_mat;
}
get marque(): string | undefined {
return this._marque;
}
set marque(_marque: string | undefined) {
this._marque =_marque;
}
}

contenu de app.component.html Contenu de app.component.ts

<h1> {{title}}</h1> import { Component } from '@angular/core';
<h2>version {{version}}</h2> import {Personne} from './classes/personne'
<ul> import { Voiture } from './classes/voiture'
<li *ngFor= "let v of voitures ;
">
Matricule : {{v.mat }} <br> @Component({
Marque : {{ v.marque }}<br> selector: 'app-root',
</li> templateUrl: './app.component.html',
</ul> styleUrls: ['./app.component.css']
})
export class AppComponent {
title = 'welcome on cars';
version='0.0';
voitures : Array <Voiture>=[new Voiture(
100,"P200")
Atelier de développement 2Ginfo

,new Voiture(101,"M200")
,new Voiture(102,"S200")
,new Voiture(103,"L200")
,new Voiture(104,"Z200")
];constructor() {}
}

Exercice 2:

Ecrire un code HTML, en utilisant les directives Angular, qui permet d’afficher le premier
élément du tableau (tab) ainsi que sa parité (pair ou impair).

Solution :

app.component.ts contenu de app.component.html

@Component({ <ul>
selector: ’app-root’, <li *ngIf="tab[0] % 2 != 0; else
templateUrl: ’./app.component.html’, sinon">
styleUrls: [’./app.component.css’] {{ tab[0] }} est impair
}) </li>
export class AppComponent { <ng-template #sinon>
title = ’cours-angular’; <li>
tab: number[] = [2, 3, 5, 8]; {{ tab[0] }} est pair
constructor() { </li>
} </ng-template>
} </ul>

Ecrire un code HTML, en utilisant les directives Angular, qui permet d’afficher les éléments
pair et les éléments impair d’un tableau d’entier. (L’affichage sera dans un tableau dont la
première colonne est l’élément du tableau la deuxième colonne affiche la parité de cet
élément)

Solution :

app.component.ts contenu de app.component.html

@Component({
selector: ’app-root’,
templateUrl:
’./app.component.html’,
styleUrls:
[’./app.component.css’]
})
export class AppComponent {
title = ’cours-angular’;
tab: number[] = [2, 3, 5,
<table *ngFor="let elt of tab" border="black">
<tr *ngIf="elt % 2 != 0; else sinon"><td >
{{ elt }} </td><td>est impair</td>
</tr>
<ng-template #sinon>
<tr><td>
{{ elt }} </td><td>est pair</td>
</ng-template>
Atelier de développement 2Ginfo

8]; </table>
constructor() {}
}
}

Essayer d’associer des couleurs d’arrière-plan pour distinguer la parité (élément paire vert
élément impaire jaune).

Solution :

app.component.ts contenu de app.component.html

@Component({ <table *ngFor="let elt of tab" border="black">
selector: ’app-root’, <tr *ngIf="elt % 2 != 0; else sinon" [ngStyle]="{'
templateUrl: background-color':'green'}"><td >
’./app.component.html’ {{ elt }} </td><td>est impair</td>
, </tr>
styleUrls: <ng-template #sinon>
[’./app.component.css’ <tr [ngStyle]="{'background-color':'yellow'}"><td>
] {{ elt }} </td><td>est pair</td>
})
export class </ng-template>
AppComponent {
title = ’cours- </table>
angular’;
tab: number[] = [2, 3,
5, 8];
constructor() {
}

Exercice 3:

Ecrire un code HTML, en utilisant les directives Angular, qui permet d’afficher sous forme
d’une liste chaque élément du tableau moyennes = [18, 5, 11, 15] avec un message défini
ainsi :

Si la valeur est comprise entre 0 et 9 : échec

Si elle est entre 10 et 13 : moyen

Si elle est entre 14 et 16 : bien

Sinon : très bien

Solution :
Atelier de développement 2Ginfo

app.component.ts contenu de app.component.html

import { Component } from '@angular/co <ul>
re'; <ng-
import {Personne} from './classes/pers container *ngFor="let elt of tab">
onne' <ng-container [ngSwitch]="true">
<li *ngSwitchCase="elt >= 0 && elt
@Component({ < 10">
selector: 'app-root', {{ elt }} : échec
templateUrl: './app.component.html', </li>
styleUrls: ['./app.component.css'] <li *ngSwitchCase="elt >= 10 && el
}) t < 13">
export class AppComponent { {{ elt }} : moyen
title = 'cours-angular'; </li>
tab: number[] = [2, 3, 5, 8,15,10,15,1 <li *ngSwitchCase="elt >= 13 && el
4,13]; t < 15">
{{ elt }} : bien
constructor() {} </li>
<li *ngSwitchCase="elt >= 15">
{{ elt }} : trés bien
} </li>
<li *ngSwitchDefault>
autre
</li>
</ng-container>
</ng-container>
</ul>

Exercice 4:

On considère la liste suivante :

Ecrire un script Angular qui permet d’afficher dans une liste HTML les éléments de la liste
personnes (on affiche que les nom et prénom). Les éléments d’indice pair seront affichés en
rouge, les impairs en bleu.

Contenu de la classe personne

export class Personne {
Atelier de développement 2Ginfo

constructor(private _num?: number, private _nom?: string,

private _prenom?: string, private _age?: number) { }
get num(): number | undefined {
return this._num;
}
set num(_num: number | undefined) {
this._num = _num;
}
get nom(): string | undefined {
return this._nom;
}
set nom(_nom: string | undefined) {
this._nom = _nom;
}
get prenom(): string | undefined {
return this._prenom;
}
set prenom(_prenom: string | undefined) {
this._prenom = _prenom;
}
get age (): number | undefined {
return this._age;
}
set age (_age : number | undefined) {
this._age= _age;
}
greet(): void {
alert("Hello "+this.age);
};

Solution :

Contenu de app.component.ts contenu de app.component.html

Atelier de développement 2Ginfo

import { Component } from '@angul <ul>

ar/core'; <ng-
import {Personne} from './classes container *ngFor="let elt of personnes; le
/personne' t i = index;">
<li [ngClass]="i % 2 != 0 ? 'rouge' : 'b
@Component({ leu'">
selector: 'app-root', {{ elt.nom + " " + elt.prenom }}
templateUrl: './app.component.h </li>
tml', </ng-container>
styleUrls: ['./app.component.cs </ul>
s']
})
export class AppComponent {
title = 'TP-angular';
tab: number[] = [2, 3, 5, 8,15,10
,15,14,13];

constructor() {}
personnes: Array<Personne> = [
new Personne(100, 'Wick', 'John
', 20),
new Personne(101, 'Abruzzi', 'J
ohn',33),
new Personne(102, 'Marley', 'Bo
b', 45),
new Personne(103, 'Segal', 'Ste
ven', 55)
];

Afficher pour chaque élément de la liste son age en cliquant un bouton qui déclenche un
message type alerte javascript.

Contenu de app.component.ts contenu de app.component.html

import { Component } from '@angular/core';
import {Personne} from './classes/personne'

@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
Atelier de développement 2Ginfo

export class AppComponent {

title = 'TP-angular';
tab: number[] = [2, 3, 5, 8,15,10,15,14,13];

constructor() {}
personnes: Array<Personne> = [
new Personne(100, 'Wick', 'John', 20),
new Personne(101, 'Abruzzi', 'John',33),
new Personne(102, 'Marley', 'Bob', 45),
new Personne(103, 'Segal', 'Steven', 55)
];