Like et partage
Les Directives
avec Angular
Hamed Soumahoro
→
2/10
C’est quoi une directive
angular ?
Une directive angular permet de
manipuler le DOM en modifiant
l'apparence, le comportement ou la
structure des éléments de la page.
Il existe trois types principaux de
directives dans Angular :
Comm
ent ça
types trois
de dir
? J’ai c ective
ru qu’ s
avait q il n'y
ue de
ux.
Oui, tu as bien lu ! Click ici
→
pour connaître la troisième !
Hamed Soumahoro
3/10
1 - Directives Structurelles
Ces directives modifient la structure
du DOM en ajoutant, supprimant ou
manipulant des éléments dans le
DOM.
Exemple :
*ngFor ou @for: Itère sur une collection et
génère un élément DOM pour chaque
user.
Hamed Soumahoro
→
4/10
*ngIf ou @if: Permet de supprimer ou
ajouter un élément au DOM en fonction
d'une condition.
2 - Directives d'Attribut
Ces directives modifient l'apparence
ou le comportement d'un élément
existant dans le DOM en manipulant
ses attributs ou son style.
Hamed Soumahoro
→
5/10
Exemple :
ngStyle :Applique des styles en ligne
dynamiquement.
ngClass : Permet de définir
dynamiquement la classe CSS d'un
élément du DOM.
Hamed Soumahoro
→
6/10
2 - Directives Composant
Les composants sont des directives
avec des templates associés. Chaque
composant dans Angular est une
directive qui contrôle une section de
l'interface utilisateur, encapsulant la
logique et le style.
Hamed Soumahoro
→
7/10
Le composant ci-dessus est une directive
associée au sélecteur app-directive.
Lorsque ce sélecteur est utilisé dans le
HTML, le template du composant est
rendu.
Je ne savais pas que les
components étaient
des directive.
Je t’éclaircis ce point
dans le prochain slide.
Hamed Soumahoro
→
8/10
Il est courant de penser qu'il n'existe que deux
types de directives en Angular, car c'est une
simplification souvent enseignée dans les
introductions à Angular. Cependant, il existe
bien trois types de directives.
En fait, dans Angular, les composants sont
considérés comme un type particulier de
directive. Cette approche est cohérente avec
l'architecture d'Angular, où tout ce qui interagit
avec le DOM est une directive.
La confusion vient souvent du fait que les
directives structurelles et d'attributs sont les
deux types de directives les plus fréquemment
mentionnés et utilisés. Les composants, bien
qu'étant un type de directive, sont souvent
enseignés et discutés séparément parce qu'ils
jouent un rôle beaucoup plus large dans la
construction d'applications Angular.
Hamed Soumahoro
→
9/10
Pour résumer
Les directives sont donc des outils puissants
dans Angular qui permettent de manipuler
et d'interagir avec le DOM de manière
déclarative et réutilisable, simplifiant ainsi
le développement d'applications
complexes.
Hamed Soumahoro
→
As-tu trouvé cela utile ?
Fais-le moi savoir en
commentaires !
Hamed Soumahoro
Développeur full stack
