A Directive in Angular is a class that adds behavior to HTML elements or changes the structure of the DOM.
Think of a directive as an instruction to Angular.
For example:
Show or hide an element
Repeat an element
Change colors
Disable buttons
Highlight text
Apply validation
Display content based on user role
Types of Directives
Angular has three types of directives.
Angular Directives
│
├──────────────┐
│ │
▼ ▼
Structural Attribute
Directives Directives
│
▼
Component
(Technically a directive with a template)
| Type | Purpose | Example |
|---|---|---|
| Component Directive | Creates a view (template) | <app-employee> |
| Structural Directive | Changes the DOM structure | *ngIf, *ngFor, *ngSwitch |
| Attribute Directive | Changes appearance or behavior | ngClass, ngStyle, custom directives |
1. Component Directive
A component is actually a directive with its own HTML template.
Example:
@Component({
selector: 'app-employee',
template: `<h2>Employee Details</h2>`
})
export class EmployeeComponent { }
Use:
<app-employee></app-employee>
Output:
Employee Details
2. Structural Directives
Structural directives add or remove elements from the DOM.
They are written with *.
A. *ngIf
Displays an element only if the condition is true.
Example
isLoggedIn = true;
<div *ngIf="isLoggedIn">
Welcome User
</div>
Output
Welcome User
If:
isLoggedIn = false;
Output
Nothing is displayed.
Real-Time Example
Internet Banking
User Logged In
↓
Dashboard Visible
Otherwise
Please Login
ngIf with else
<div *ngIf="isLoggedIn; else loginPage">
Welcome User
</div>
<ng-template #loginPage>
Please Login
</ng-template>
B. *ngFor
Used to repeat HTML.
Component
employees = [
"Mahesh",
"Ravi",
"Priya",
"Kiran"
];
HTML
<ul>
<li *ngFor="let emp of employees">
{{emp}}
</li>
</ul>
Output
Mahesh
Ravi
Priya
Kiran
Real-Time Example
Employee List
Employee Table
↓
100 Employees
↓
*ngFor repeats rows
ngFor with Index
<li *ngFor="let emp of employees; let i=index">
{{i+1}} - {{emp}}
</li>
Output
1 - Mahesh
2 - Ravi
3 - Priya
ngFor with first and last
<li *ngFor="let emp of employees;
let first=first;
let last=last">
{{emp}}
{{first}}
{{last}}
</li>
Output
Mahesh true false
Ravi false false
Priya false true
C. ngSwitch
Component
role = "Admin";
HTML
<div [ngSwitch]="role">
<p *ngSwitchCase="'Admin'">
Admin Dashboard
</p>
<p *ngSwitchCase="'Employee'">
Employee Dashboard
</p>
<p *ngSwitchDefault>
Invalid User
</p>
</div>
Output
Admin Dashboard
Real-Time Example
Login
Admin
↓
Admin Dashboard
Employee
↓
Employee Dashboard
3. Attribute Directives
Attribute directives change appearance or behavior.
ngClass
Component
isActive = true;
HTML
<div
[ngClass]="{'active':isActive}">
Employee
</div>
CSS
.active{
color:red;
font-weight:bold;
}
Output
Employee (Red Color)
Real-Time Example
Employee Status
Active Employee
↓
Green Color
Inactive
↓
Gray Color
ngStyle
<div
[ngStyle]="{
'color':'blue',
'font-size':'25px'
}">
Employee
</div>
Output
Blue Employee
Real-Time Example
Bank Balance
If balance is low
<div
[ngStyle]="{
'color':
balance<1000?
'red':'green'
}">
{{balance}}
</div>
Built-in Attribute Directive Example
Disable Button
<button
[disabled]="isSaving">
Save
</button>
Custom Attribute Directive
Suppose HR wants every employee card highlighted on mouse hover.
Generate Directive
ng g directive highlight
highlight.directive.ts
import {
Directive,
ElementRef,
HostListener
} from '@angular/core';
@Directive({
selector:'[appHighlight]'
})
export class HighlightDirective{
constructor(
private element:ElementRef){}
@HostListener('mouseenter')
mouseEnter(){
this.element.nativeElement.style.backgroundColor="yellow";
}
@HostListener('mouseleave')
mouseLeave(){
this.element.nativeElement.style.backgroundColor="white";
}
}
Use
<div appHighlight>
Employee Card
</div>
Output
Mouse Hover
↓
Yellow Background
Mouse Leave
↓
White Background
Custom Permission Directive
<div *appHasRole="'Manager'">
Salary Details
</div>
Logic
if(role==="Manager")
{
show=true;
}
Real-Time Example
Employee Login
Role
↓
Employee
↓
Salary Hidden
Manager
↓
Salary Visible
Custom Disable Directive
<input appDisable />
Directive
this.element.nativeElement.disabled=true;
Output
Textbox Disabled
Real-Time Employee Portal
Employee Dashboard
│
▼
*ngIf
Show Attendance
│
▼
*ngFor
List Employees
│
▼
ngClass
Green Active Employee
│
▼
ngStyle
Salary Red
│
▼
appHighlight
Hover Effect
│
▼
appHasRole
Manager Only
Structural vs Attribute Directives
| Feature | Structural Directive | Attribute Directive |
|---|---|---|
| Changes DOM | Yes | No |
| Adds/Removes Elements | Yes | No |
| Changes Style | No | Yes |
Uses * | Yes | No |
| Examples | *ngIf, *ngFor, *ngSwitch | ngClass, ngStyle, appHighlight |
Interview Questions
1. What is a directive in Angular?
A directive is a class that adds behavior to HTML elements or changes the DOM structure.
2. How many types of directives are there?
Three:
Component Directives
Structural Directives
Attribute Directives
3. What is the difference between *ngIf and [hidden]?
*ngIf | [hidden] |
|---|---|
| Removes the element from the DOM when false | Keeps the element in the DOM but hides it using CSS |
4. What is the difference between ngClass and ngStyle?
ngClass | ngStyle |
|---|---|
| Applies one or more CSS classes | Applies inline CSS styles |
5. Can we create custom directives?
Yes. Angular allows you to create reusable custom directives using the @Directive decorator.
Note for Angular 17+: The examples above use the classic structural directives (
*ngIf,*ngFor,*ngSwitch), which are still widely used. Angular 17 also introduced new built-in control flow syntax (@if,@for, and@switch) as a modern alternative. Many existing projects and interview questions still use the*syntax, so it's important to understand both.
