Manipulation de composants dans

Année universitaire
2023-2024
Architecture Angular

Data-Binding

Les directives et les pipes

Cycle de vie d’un composant

2
Architecture Angular
 Architecture Angular

Ref image: https://angular.io/guide/architecture

Architecture Angular

Modules Data-Binding

Components Directives

Templates Services

Dependency
MetaData
Injection
 Angular est modulaire
• Une application Angular est modulaire.

• Elle possède au moins un module appelé « module

racine » ou « root module »

• Elle peut contenir d’autres modules à part le module

racine.

• Par convention, le module racine est appelé

« AppModule » et se trouve dans un fichier appelé
« app.module.ts »

6
 Modules/NgModules
• Lesystème de modularité dans Angular est
appelé NgModules.

• Un module peut être exporté sous forme de

classe.

• La classe qui décrit le module Angular est une

classe décorée par @NgModule.
Exemple: FormsModule, HttpClientModule,
RouterModule
Les décorateurs sont des fonctions qui modifient les classes
Type Script. Ils sont essentiellement utilisés pour attacher des
métadonnées à des classes afin que le système connaisse la
configuration de ces classes et leur fonctionnement.
 Modules/NgModules

• Declarations: les composants – directives – pipes

utilisés par ce module

• Imports: les modules internes ou externes utilisés

dans ce module

• Providers: Les services utilisés

• Bootstrap: déclare la vue principale de

l’application (celle du composant racine).
Composition d’un module Angular

Ref Image: https://www.ngdevelop.tech/angular/architecture/

 Résumé
• Une application Angular possède au moins un module, le root module, nommé par convention
AppModule.

• Un module Angular est défini simplement avec une classe (généralement vide) et le décorateur
NgModule.

• Un module Angular est un mécanisme permettant de :

o regrouper des composants (mais aussi des services, directives, pipes etc...),
o définir leurs dépendances
o définir leur visibilité.
Architecture Angular

Modules Data-Binding

Components Directives

Templates Services

Dependency
MetaData
Injection
 Composant Angular: Définition
• Composant web est un élément personnalisé et réutilisable.
• Un composant peut correspondre à une page entière ou un élément
de l’interface (menu, header, modal, datepicker, etc…).

• Un module peut contenir un ou plusieurs composants.

• Une application a au moins un composant racine: Root Component.
• Une classe décorée par le décorateur @Component (angular/core)
qui le définit comme étant un composant et spécifie sa métadata qui
indique comment il sera utilisé.
 Composant Angular: Composition
Un composant Angular contient:
.

• Un Template contenant l’interface utilisateur en Classe:

HTML. Nous utiliserons le databinding afin de rendre la
Logique, Type Script,
vue dynamique,
Propriétés , méthode

• Classe (class) contenant le code associé à la vue , des Template: Meta Data
propriétés et méthodes logiques qui seront utilisées
Interface, html, Décorateur, donnés
dans la vue, directive, binding supplémentaire

• Des Metadata nous permettant de définir la classe

comme étant un composant Angular (component).
Composant
Angular
 Composant Angular: Création
• Générer un nouveau composant dans votre Application angular:
ng generate component header ou ng g c header
 Composant Angular: Création
• Le composant header est dans votre projet:
 Composant Angular: Declaration
Le décorateur @Component (angular/core) doit contenir
au moins les 3 premiers tags:

• Le sélecteur: Il indique la déclaration qui permet

d’insérer le composant dans le document HTML.

• TemplateUrl: permet d’associer un fichier externe

HTML contenant la structure de la vue du composant

• StyleUrls: spécifier les feuilles de styles CSS

associées à ce composant.
.
 Composant Angular: Affichage
• Le sélecteur permet de faire appel à votre composant:
Data-Binding
 Liaison entre Template et Component
Afficher propriété

Template Bouton
MetaData Html, CSS

• Le databinding est un mécanisme de

Data coordination entre le composant et le
Template dans un seul sens ou dans
Binding les deux sens.

Component Classe {
propriété
TypeScript méthode1()
méthode2()
}
Data-Binding

Modules Data-Binding

Components Directives

Templates Services

Dependency
MetaData
Injection
 Data binding: Définition
• Le databinding est un mécanisme de coordination Afficher propriété
entre le component et le Template dans un seul sens Template Bouton
ou dans les deux sens. Html, CSS

• Il existe 4 formes de databinding

Data
Binding

Component Classe {
propriété
TypeScript
méthode1()
méthode2()
}
 Data binding: Interpolation
• La syntaxe d'interpolation permet d'accéder directement aux Component A
propriétés du composant associé. Export class Component A{
property1="Bonjour";
• L’interpolation permet d’évaluer une expression methodeA(){ return 2}
{{ expression_template }} }

• Angular évalue l’expression ensuite convertit le résultat en chaine de

caractères.
Template A
<h1> {{property1}} </h1>
• Exemples: <p>{{1+2}}</p>
<p>{{ 1+ methodeA() }}</p>
✓{{ property1 }} : property 1 est une propriété du composant
✓{{ 1 + 2 }} : le résultat affiché est 3
✓{{ 1+ methode A() }} : le résultat affiché est la somme de 1 avec e
résultat de la méthode getval() Bonjour
3
3
 Data binding: Property Binding
Property binding permet de modifier la valeur d’une propriété d’un
élément du DOM par la valeur d’une propriété du composant

Template A
<button [disabled]= 'property' />
Envoyer
Rendu Final
</button>

Component A

export class A{
property: boolean = ‘true’
}
 Data binding: Event Binding
Event binding permet d’appeler une méthode du composant suite à une
action faite par l’utilisateur au niveau du template
Template A Rendu final
<button (click)="methodeA()"> envoyer</button>
<p>{{ message}} </p> envoyer

click
Component A
export class A { Rendu final
message: string = ‘ ’;
envoyer
methodeA(){
this.message = ‘vous avez implémenté le Event vous avez implémenté le Event Binding’
Binding’
}
}
 Data binding: Two way data binding
Two-way data binding: permet de récupérer une valeur à partir du
template et l’envoyer vers une propriété du composant et vice versa.
Ceci se fait grâce à la directive NgModel.
Le contenu de property est affiché au
Component A niveau de l’input.
Template A
export class Component A{
<input [(ngModel)]=
property="Bonjour";
'property' />
}

La valeur de property devient

'Salut'
 Data binding: Two way data binding
Pour utiliser la directive NgModel, il faut importer le module
FormsModule depuis @angular/forms et le déclarer dans la liste
des imports du module racine AppModule.
Les Directives et les pipes
Les directives - Définition

• Une directive est un décorateur qui marque une classe comme

directive.
• Une directive applique une logique aux éléments du DOM.
• Il existe trois types de directives:
1. Composant
2. Directives structurelles
3. Directives attributs
 Directives structurelles

Une directive structurelle permet de modifier le DOM.

- Elles sont appliquées sur l’élément HOST

- Elles sont généralement précédées par le préfix *

Les directives structurelles

*ngIF

Directives Structurelles *ngFor

[ngSwitch], *ngSwitchCase
Directives Structurelles: *ngIf

La directive ngIf est utilisée lorsque vous souhaitez afficher ou

supprimer un élément en fonction d'une condition. Prend un
booléen en paramètre.
- Si le booléen est true alors l’élément est visible
- Si le booléen est false alors l’élément est caché
Directives Structurelles: *ngIf … else

<div *ngIf = "condition ; else other_content ">

contenu ici …
</div>
<ng-template #other_content >
autre contenu ici …
</ng-template>
 Directives Structurelles: *ngFor

• Permet de répéter un élément plusieurs fois dans le DOM. Prend en

paramètre les entités à reproduire.
• Fournit certaines valeurs :

- index : position de l'élément courant

- first : vrai si premier élément
- last : vrai si dernier élément
- even : vrai si l'indice est pair
- odd : vrai si l'indice est impair
Directives Structurelles: *ngFor

Exemple
Directives Structurelles: [ngSwitch]

Cette directive nous permet de

rendre différents éléments en
fonction d'une condition donnée,
en effet la directive NgSwitch est
un ensemble de
directives fonctionnant
en conjonction
Les pipes

• Les pipes transforment les données avant de les afficher.

• L’opérateur pipe passe le résultat d'une expression sur la
gauche à une fonction pipe sur la droite tels que: DatePipe,
UpperCasePipe, LowerCasePipe, ….
{{item.helpDate | date:'longDate'}}
• Vous pouvez chaîner des expressions via plusieurs pipes

{{title | uppercase | lowercase}}

Cycle de vie d’un composant
Cycle de vie d’un composant

• Un composant passe par plusieurs phases depuis sa création jusqu’à sa

destruction : cycle de vie
• Angular maintient et suit ces différentes phases en utilisant des
méthodes appelées « hooks ».
• A chaque phase on peut implémenter une logique.
• Ces méthodes se trouvent dans des
interfaces dans la librairie « @angular/core »
Cycle de vie d’un composant

• Le constructeur d’un composant n’est pas un hook mais il fait

partie du cycle de vie d’un composant : sa création

• Il est logiquement appelé en premier, et c'est à ce moment que les

dépendances (services) sont injectées dans le composant par
Angular.
Cycle de vie d’un composant

Méthode/hook Rôle

ngOnChanges Appelé lorsqu'une propriété input est définie ou

modifiée de l'extérieur. L'état des modifications
sur ces propriétés est fourni en paramètre
ngOnInit Appelé une seule fois après le 1er appel du
hook ngOnChanges().
Permet de réaliser l'initialisation du composant,
qu'elle soit lourde ou asynchrone (on ne touche
pas au constructeur pour ça)
ngDoCheck Appelé après chaque détection de
changements
ngAfterContentInit Appelé une fois que le contenu externe est
projeté dans le composant (transclusion)
Cycle de vie d’un composant
Méthode Rôle

ngAfterContentChecked Appelé chaque fois qu'une vérification du

contenu externe (transclusion) est faite
ngAfterViewInit Appelé dès lors que la vue du composant
ainsi que celle de ses enfants sont
initialisés
ngAfterViewChecked Appelé après chaque vérification des vues
du composant et des vues des composants
enfants.
ngOnDestroy Appelé juste avant que le composant soit
détruit par Angular. Il permet alors de
réaliser le nettoyage adéquat de son
composant. C'est ici qu'on veut se
désabonner des Observables ainsi que des
events handlers sur lesquels le composant
s'est abonné.
Cycle de vie d’un composant

Les méthodes ngAfterContentInit, ngAfterContentChecked,

ngAfterViewInit et ngAfterViewChecked sont exclusives aux
composants, tandis que toutes les autres le sont aussi pour les
directives.
Références

• https://angular.io/
Merci de votre attention