TP Angular Complet
Variables, Binding, Directives, Routing
Support pédagogique
23 février 2026
Table des matières
1 Les Variables en Angular 2
1.1 Exemple . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 2
2 Le Data Binding 2
2.1 1. Interpolation . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 2
2.2 2. Property Binding . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 2
2.3 3. Event Binding . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 3
2.4 4. Two-Way Binding . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 3
3 Les Directives 3
3.1 1. *ngIf . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 3
3.2 2. *ngFor . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 3
3.3 3. ngClass . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 4
3.4 4. ngStyle . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 4
4 Composants Parent / Enfant 4
5 Routing 4
6 Navbar 5
7 Bootstrap 5
8 Tailwind 5
9 Exercices Guidés 5
9.1 Exercice 1 : Variables et Interpolation . . . . . . . . . . . . . . . . . . . . . . . . . . 5
9.2 Exercice 2 : Event Binding . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 5
9.3 Exercice 3 : Two-Way Binding . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 6
9.4 Exercice 4 : *ngIf . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 6
9.5 Exercice 5 : *ngFor . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 6
9.6 Exercice 6 : ngClass et ngStyle . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 6
9.7 Exercice 7 : Parent → Enfant . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 6
9.8 Exercice 8 : Enfant → Parent . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 7
9.9 Exercice 9 : Routing . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 7
9.10 Exercice 10 : Projet Mini-Application . . . . . . . . . . . . . . . . . . . . . . . . . . . 7
1
1 Les Variables en Angular
Concept
Angular utilise TypeScript. Une variable est une donnée stockée dans une classe composant.
1.1 Exemple
title : string = " TP Angular ";
compteur : number = 0;
Dans le HTML :
<h1 >{{ title }} </ h1 >
<p >{{ compteur }} </ p >
Exercice
Créer une variable nom et afficher : Bonjour nom
2 Le Data Binding
Concept
Le Data Binding permet de connecter les données TypeScript au HTML.
Il existe 4 types : 1. Interpolation 2. Property Binding [ ] 3. Event Binding ( ) 4. Two-Way
Binding [( )]
2.1 1. Interpolation
Concept
Permet d’afficher une variable dans le HTML.
<p >{{ compteur }} </ p >
Exercice
Afficher le prix d’un produit avec interpolation.
2.2 2. Property Binding
Concept
Permet de lier une propriété HTML à une variable.
< img [ src ]=" imageUrl " >
< button [ disabled ]=" isDisabled " > Valider </ button >
Exercice
Créer une variable isAdmin. Si false, désactiver un bouton.
2
2.3 3. Event Binding
Concept
Permet d’écouter un événement HTML (click, input, etc.)
< button ( click ) =" incrementer () " >+ </ button >
Exercice
Créer un bouton qui affiche une alerte.
2.4 4. Two-Way Binding
Concept
Permet de synchroniser automatiquement une variable et un champ input. Nécessite Form-
sModule.
< input [( ngModel ) ]=" nom " >
<p >{{ nom }} </ p >
Exercice
Créer un champ qui affiche en temps réel ce que l’utilisateur tape.
3 Les Directives
Concept
Les directives modifient le comportement ou l’apparence du DOM. Il existe : - Directives
structurelles (*) - Directives d’attribut
3.1 1. *ngIf
Concept
Affiche un élément seulement si la condition est vraie.
<p * ngIf =" isVisible " > Contenu </ p >
Exercice
Créer un bouton afficher/masquer.
3.2 2. *ngFor
Concept
Permet de parcourir un tableau.
< li * ngFor =" let produit of produits " >
{{ produit . nom }}
</ li >
3
Exercice
Créer une liste de 5 catégories et les afficher.
3.3 3. ngClass
Concept
Permet d’ajouter dynamiquement une classe CSS.
<p [ ngClass ]="{ ’ text - danger ’: prix > 5000}" >
{{ prix }}
</p >
Exercice
Si stock = 0 afficher en rouge.
3.4 4. ngStyle
Concept
Permet d’ajouter un style dynamique.
<p [ ngStyle ]="{ ’ font - size ’: taille + ’px ’}" >
Texte
</p >
Exercice
Créer un bouton qui augmente la taille du texte.
4 Composants Parent / Enfant
Concept
Un composant Angular est une unité UI réutilisable. Communication : Parent → Enfant :
@Input Enfant → Parent : @Output
(Insérer ici le code déjà fourni précédemment)
5 Routing
Concept
Le routing permet de naviguer entre plusieurs pages sans recharger l’application.
const routes : Routes = [
{ path : ’’, component : HomeComponent } ,
{ path : ’ produits ’ , component : Produi tsCompon ent } ,
];
4
Exercice
Ajouter une route /contact.
6 Navbar
Concept
La Navbar permet la navigation via routerLink.
<a routerLink ="/ produits " > Produits </ a >
7 Bootstrap
Concept
Bootstrap est un framework CSS basé sur des classes prédéfinies.
8 Tailwind
Concept
Tailwind est un framework utility-first. On applique des classes directement.
9 Exercices Guidés
9.1 Exercice 1 : Variables et Interpolation
Exercice
Objectif : Manipuler les variables et l’interpolation.
Étapes :
1. Dans [Link], créer : - une variable nom (string) - une variable age (number) -
une variable ville (string)
2. Dans [Link], afficher :
Bonjour je m’appelle NOM J’ai AGE ans J’habite à VILLE
3. Modifier les valeurs et vérifier l’affichage.
Question : Pourquoi utilise-t-on ?
9.2 Exercice 2 : Event Binding
Exercice
Objectif : Comprendre les événements.
Étapes :
1. Créer une variable compteur = 0 2. Créer deux fonctions : incrementer() decrementer()
3. Ajouter deux boutons : + augmente le compteur - diminue le compteur
4. Afficher la valeur du compteur.
Bonus : Afficher en rouge si compteur < 0
5
9.3 Exercice 3 : Two-Way Binding
Exercice
Objectif : Synchronisation automatique des données.
Étapes :
1. Importer FormsModule dans [Link] 2. Créer une variable prenom 3. Ajouter un
champ input 4. Afficher en temps réel :
Bonjour PRENOM
Question : Quelle est la différence entre [value] et [(ngModel)] ?
9.4 Exercice 4 : *ngIf
Exercice
Objectif : Affichage conditionnel.
Étapes :
1. Créer une variable estConnecte = false 2. Si false afficher : "Veuillez vous connecter" 3. Si
true afficher : "Bienvenue utilisateur"
4. Ajouter un bouton pour changer l’état.
Bonus : Utiliser *ngIf avec else.
9.5 Exercice 5 : *ngFor
Exercice
Objectif : Parcourir un tableau.
Étapes :
1. Créer un tableau produits : nom + prix
2. Afficher les produits dans : - une liste ul - un tableau HTML
3. Ajouter un troisième produit.
Bonus : Afficher l’index avec let i = index
9.6 Exercice 6 : ngClass et ngStyle
Exercice
Objectif : Styles dynamiques.
Étapes :
1. Créer une variable stock 2. Si stock = 0 afficher en rouge 3. Si stock > 0 afficher en vert
4. Créer un bouton pour augmenter le stock.
Bonus : Changer la taille du texte dynamiquement.
9.7 Exercice 7 : Parent → Enfant
Exercice
Objectif : @Input
Étapes :
1. Créer un composant enfant 2. Passer une variable message depuis le parent 3. Afficher le
message dans l’enfant.
Question : Pourquoi utilise-t-on @Input ?
6
9.8 Exercice 8 : Enfant → Parent
Exercice
Objectif : @Output
Étapes :
1. Dans l’enfant, créer un bouton 2. Émettre un message avec EventEmitter 3. Dans le parent,
afficher le message reçu.
Question : Pourquoi EventEmitter est nécessaire ?
9.9 Exercice 9 : Routing
Exercice
Objectif : Navigation multi-pages.
Étapes :
1. Créer une page Contact 2. Ajouter la route /contact 3. Ajouter un lien dans la navbar 4.
Vérifier la navigation sans rechargement.
Bonus : Ajouter une route wildcard (page 404).
9.10 Exercice 10 : Projet Mini-Application
Exercice
Objectif : Application complète.
Créer une mini-application avec :
- Une navbar - Une page Produits - Une page Catégories - Une page Contact - Utiliser : -
*ngFor - *ngIf - @Input - Routing
Bonus : Ajouter un filtre de recherche.