ANGULAR INTERVIEW QUESTION: What are the different kind...

Return to site

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:

import { Directive, ELementRef } from '@angular/core';
@Directive({
 selector: '[appRedBackgroundColor]'
})
export class RedBackgroundColorDirective {
 constructor (el:ElementRef){
  el.nativeElement.style.backgroundColor = "red"l
 }
}

Then you apply your custom directive on any DOM element or Angular component belonging to the same module:

<p appRedBackgroundColor>Hello World!</p>

𝟐) 𝐓𝐡𝐞 𝐜𝐨𝐦𝐩𝐨𝐧𝐞𝐧𝐭𝐬

The components are directives that have a binded template, style sheet and a selector property WITHOUT brackets.

selector: [appRedBackgroundColor] //Directives
selector: appRedBackgroundColor //Components

𝟑) 𝐓𝐡𝐞 𝐬𝐭𝐫𝐮𝐜𝐭𝐮𝐫𝐚𝐥 𝐝𝐢𝐫𝐞𝐜𝐭𝐢𝐯𝐞𝐬

Thes directives modify the DOM by adding orremoving elements or elements children.

The ngIf and ngFor are examples of structural directives:

<!-- *ngIf conditions the display -->
<div *ngIf="age > 18"> 🍺🍺🍺</div>
<!-- *ngFor factorize the declarations of similar DOM elements-->
<div *ngFor="let people of peopleList">
 <p>{{ people.name }}</p>
 <p>{{ people.age }}</p>
</div>

NB: the Angular structural directives have a star at the beginning of their selector.