angular
/

Angular Directives – Extending HTML Power

Last Sync: Today

On this page

5
0%
5 min read
Remaining
5 minleft

Click any section to jump — progress syncs automatically

angular

Angular Directives – Extending HTML Power

What are Directives?

Directives are classes that add new behavior to elements in your templates. As a Technical Lead, you can think of them as 'instructions' for the DOM. While components are directives with templates, many directives are used to manipulate the appearance or layout of existing elements. Angular uses them to make static HTML dynamic and responsive to your application state.

  1. Three Types of Directives

Angular categorizes directives based on how they affect the DOM. Understanding these categories is essential for maintaining a clean architecture.

  • Components: Directives with a template. This is the most common type.
  • Attribute Directives: Change the appearance or behavior of an element, component, or another directive (e.g., ngClass, ngStyle).
  • Structural Directives: Change the DOM layout by adding and removing DOM elements (e.g., *ngIf, *ngFor).

  1. Structural Directives (The Asterisk Syntax)

Structural directives are easy to recognize because of the asterisk (*) prefix. They shape or reshape the DOM's structure, typically by adding, removing, or manipulating elements.

HTMLRead-only
1

<div *ngIf="isProjectActive">
  <p>Revochamp Engine is Running...</p>
</div>


<li *ngFor="let feature of features; let i = index">
  {{ i + 1 }}. {{ feature }}
</li>

  1. Attribute Directives

Attribute directives look like regular HTML attributes. They are used to dynamically change the CSS classes or styles applied to an element based on the component's state.

HTMLRead-only
1

<div [ngClass]="{'active-theme': isDark, 'legacy-ui': !isModern}">
  Themed Content
</div>


<div [ngStyle]="{'color': statusColor, 'font-size.px': fontSize}">
  Status Message
</div>

Directive Comparison Table

TypePrefixPurposeCommon Examples
Structural*Adds/Removes elements from DOM*ngIf, *ngFor, *ngSwitch
Attribute[]Modifies look or behaviorngClass, ngStyle, ngModel
CustomVariesDeveloper-defined behaviorappHighlight, appTooltip

Test Your Knowledge

Q1
of 3

Which prefix is used to identify a structural directive in Angular templates?

A
#
B
[]
C
*
D
()
Q2
of 3

Which attribute directive would you use to conditionally apply multiple CSS classes at once?

A
ngStyle
B
ngBase
C
ngClass
D
ngRepeat
Q3
of 3

What happens to the DOM when an *ngIf expression evaluates to false?

A
The element is hidden with 'display: none'
B
The element is removed entirely from the DOM
C
The element becomes transparent
D
The element is moved to the bottom of the page

Frequently Asked Questions

Why do structural directives use an asterisk (*)?

The asterisk is 'syntactic sugar' for a more complex attribute. Angular internally translates '*ngIf' into an <ng-template> element wrapped around the host element, which keeps the template cleaner for developers.

Can I use *ngIf and *ngFor on the same element?

No. Angular allows only one structural directive per element. To use both, you should wrap the element in an <ng-container> or a <div> and apply one directive to the wrapper.

What is <ng-container>?

It is a logical container that does not render in the final DOM. It is perfect for hosting structural directives without adding extra unnecessary <div> tags to your layout.

Previous

angular data binding

Next

angular pipes

Related Content

Need help?

Explore our comprehensive docs or start a chat with our tech experts.