ANGULAR INTERVIEW QUESTION: What are the different kinds of Angular directives?

𝐓𝐡𝐞𝐫𝐞 𝐚𝐫𝐞 𝐭𝐡𝐫𝐞𝐞 𝐤𝐢𝐧𝐝𝐬 𝐨𝐟 𝐝𝐢𝐫𝐞𝐜𝐭𝐢𝐯𝐞𝐬:

👉𝐀𝐭𝐭𝐫𝐢𝐛𝐮𝐭𝐞 𝐝𝐢𝐫𝐞𝐜𝐭𝐢𝐯𝐞𝐬

👉𝐂𝐨𝐦𝐩𝐨𝐧𝐞𝐧𝐭𝐬

👉𝐒𝐭𝐫𝐮𝐜𝐭𝐮𝐫𝐚𝐥 𝐝𝐢𝐫𝐞𝐜𝐭𝐢𝐯𝐞𝐬

𝟏) 𝐓𝐡𝐞 𝐚𝐭𝐭𝐫𝐢𝐛𝐮𝐭𝐞 𝐝𝐢𝐫𝐞𝐜𝐭𝐢𝐯𝐞𝐬

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.