𝐓𝐡𝐞𝐫𝐞 𝐚𝐫𝐞 𝐭𝐡𝐫𝐞𝐞 𝐤𝐢𝐧𝐝𝐬 𝐨𝐟 𝐝𝐢𝐫𝐞𝐜𝐭𝐢𝐯𝐞𝐬:
👉𝐀𝐭𝐭𝐫𝐢𝐛𝐮𝐭𝐞 𝐝𝐢𝐫𝐞𝐜𝐭𝐢𝐯𝐞𝐬
👉𝐂𝐨𝐦𝐩𝐨𝐧𝐞𝐧𝐭𝐬
👉𝐒𝐭𝐫𝐮𝐜𝐭𝐮𝐫𝐚𝐥 𝐝𝐢𝐫𝐞𝐜𝐭𝐢𝐯𝐞𝐬
𝟏) 𝐓𝐡𝐞 𝐚𝐭𝐭𝐫𝐢𝐛𝐮𝐭𝐞 𝐝𝐢𝐫𝐞𝐜𝐭𝐢𝐯𝐞𝐬
They allow to modify the appearance and the behavior of a DOM element.
For example, ngStyle and ngClass.
You can make your own attribute directive.
Custom code:
Then you apply your custom directive on any DOM element or Angular component belonging to the same module:
𝟐) 𝐓𝐡𝐞 𝐜𝐨𝐦𝐩𝐨𝐧𝐞𝐧𝐭𝐬
The components are directives that have a binded template, style sheet and a selector property WITHOUT brackets.
𝟑) 𝐓𝐡𝐞 𝐬𝐭𝐫𝐮𝐜𝐭𝐮𝐫𝐚𝐥 𝐝𝐢𝐫𝐞𝐜𝐭𝐢𝐯𝐞𝐬
Thes directives modify the DOM by adding orremoving elements or elements children.
The ngIf and ngFor are examples of structural directives:
NB: the Angular structural directives have a star at the beginning of their selector.