TP1 .

Programmation Front-End

Ce qu’on abordera dans ce TP :

● Utilisation de Angular Material
● Revoir le two-way data binding (binding bidirectionnel) en Angular
● Découpage de l’application en composants
● Passage de paramètres entre composant (@Input et @Output)

Partie 1.
On reprend l’exemple des assignments (devoirs à rendre) vu en cours
En premier temps, je suppose que vous avez déjà créé un premier composant
“assignments” et déclaré une liste d’assignements dans la classe
assignments.component.ts.

assignments: any[] = [
{
nom: 'TP1 intro: TypeScript',
dateDeRendu: '2023-09-27',
rendu: true,
},
{
nom: 'TP2 Angular : un joli gestionnaire de devoirs',
dateDeRendu: '2023-11-03',
rendu: false,
},
{
nom: 'TP3 Angular, utilisation de router et de Web services',
dateDeRendu: '2023-12-22',
rendu: false,
},
];
1. Au niveau de la vue du composant assignments, afficher la liste des
assignments Il faut distinguer les assignments rendus de ceux qui ne le sont
pas. Pour le faire, pensez à combiner l’utilisation des directives vues en
cours: *ngFor, *ngIf et ngClass

2. Créer une classe Typescript assignment.model.ts pour représenter un

assignment avec 3 champs: nom (string), date De Rendu (date), rendu
(booléen). Faites usage de la classe et modifiez votre code !!!

3. Prévoir un formulaire pour ajouter un nouvel assignment a la liste

d’assignments. Rajoutez les modules nécessaires aux composants Angular
Material.

<form class="form" #formAssignment>

<mat-form-field>
<input matInput
#nomAssignment
placeholder="Nom du devoir"
[(ngModel)]="nomDevoir"
name="nom"
>
</mat-form-field>
<mat-form-field>
<input
matInput
[matDatepicker]="picker"
placeholder="Date de rendu"
[(ngModel)]="dateDeRendu"
name="date"
/>
<mat-hint>MM/DD/YYYY</mat-hint>
<mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle>
<mat-datepicker #picker></mat-datepicker>
</mat-form-field>
 <button mat-stroked-button color="primary" (click)="onSubmit()">
Ajouter un devoir
</button>
</form>

NB. N’oubliez d’importer le FormsModule dans l'AppModule pour qu'Angular

reconnaisse et applique la directive ngModel.

4. Créer un composant assignment-detail qui sera responsable d’afficher

le détail d’un assignement une fois qu’on cliquera dessus. Il faut savoir que
assignment-detailest un sous-composant du composant assignment.
On dit aussi que c’est un composant fils.

Ce composant devra permettre d’afficher le détail d’un assignment une fois

qu’on cliquera sur un.
En premier temps, il faudrait afficher une “belle” liste des devoirs à rendre
(utilisez des composants de Angular Material)

Puis, une fois qu’on cliquera sur un élément, on doit avoir le détail du devoir de
cette manière:
 Il faut noter qu’il faut afficher la checkbox uniquement si le devoir n’a pas été
rendu.

Typiquement, ce cas est le cas de la communication du composant père vers le

composant fils.

5. Créer un autre composant add-assignment qui sera également un sous

composant du composant assignments responsable de créer un nouvel
assignment et de le remettre au composant parent.