Angular · Theory

Directives

Theory

8/43

Directives

A directive changes an existing element. Attribute directive: highlight Fail rows. Structural: *ngIf / *ngFor add or remove nodes. Components are directives with a template.

Write @Directive({ selector: '[appFail]' }) and HostBinding('class.fail'). Use it as <tr appFail>. Don’t build a whole component just to add a class.

Trap — putting business rules inside a directive that should live in a service. Directives are for the DOM.

Exam tip

Attribute vs structural. One HostBinding example.

Example

// template
// <p *ngIf="ok">Visible</p>
// <li *ngFor="let u of users">{{ u }}</li>

users = ["Asha", "Ravi"];
ok = true;

Directives — *ngIf toggles DOM; *ngFor repeats a template per item.

Short notes

DefChange an element — attribute or structural.
RuleDOM job → directive. Data job → service.
TrapFat directive with API calls.

Angular · Theory

Directives

← All stacks

Theory

8/43

Directives

A directive changes an existing element. Attribute directive: highlight Fail rows. Structural: *ngIf / *ngFor add or remove nodes. Components are directives with a template.

Write @Directive({ selector: '[appFail]' }) and HostBinding('class.fail'). Use it as <tr appFail>. Don’t build a whole component just to add a class.

Trap — putting business rules inside a directive that should live in a service. Directives are for the DOM.

Exam tip

Attribute vs structural. One HostBinding example.

Example

// template
// <p *ngIf="ok">Visible</p>
// <li *ngFor="let u of users">{{ u }}</li>

users = ["Asha", "Ravi"];
ok = true;

Directives — *ngIf toggles DOM; *ngFor repeats a template per item.

Short notes

DefChange an element — attribute or structural.
RuleDOM job → directive. Data job → service.
TrapFat directive with API calls.

Directives

Example

Short notes

Questions

Directives

Example

Short notes

Questions