Angular applications are built using three fundamental building blocks:
Components – Build reusable UI sections.
Directives – Add or modify the behavior of HTML elements.
Pipes – Transform data for display without changing the original value.
A real-world Employee Management System uses all three together.
Employee Management Application
Angular
│
┌──────────┼──────────┐
│ │ │
Components Directives Pipes
│ │ │
Employee Highlight Currency
Dashboard Permission Date
Login Validation Custom Format
1. Custom Components
What is a Component?
A component is a reusable UI element that contains:
HTML (Template)
CSS (Styles)
TypeScript (Logic)
Every screen in Angular is made up of components.
Real-Time Banking Example
Consider an Online Banking Application.
Internet Banking
-----------------------------------------
Header Component
-----------------------------------------
Menu Component
-----------------------------------------
Account Summary Component
-----------------------------------------
Transaction Component
-----------------------------------------
Footer Component
-----------------------------------------
Instead of writing one huge page, each section becomes a reusable component.
Create Component
ng generate component employee
or
ng g c employee
Employee Component
employee.component.ts
import { Component } from '@angular/core';
@Component({
selector: 'app-employee',
templateUrl: './employee.component.html'
})
export class EmployeeComponent {
employeeName = "Mahesh";
designation = "Software Engineer";
}
employee.component.html
<h2>{{employeeName}}</h2>
<p>{{designation}}</p>
App Component
<app-employee></app-employee>
Output
Mahesh
Software Engineer
Real-Time Example
Employee Dashboard
Dashboard
↓
Employee Component
↓
Employee Details
↓
Salary Component
↓
Leave Component
↓
Attendance Component
Each is a separate component.
Parent to Child Communication
Parent Component
<app-employee
[employeeName]="name">
</app-employee>
Child Component
@Input()
employeeName:string="";
Output
Mahesh
Child to Parent Communication
Child
@Output()
save=new EventEmitter();
SaveEmployee(){
this.save.emit();
}
Parent
<app-employee
(save)="SaveCompleted()">
</app-employee>
Real-Time Example
Employee Form
Employee Component
↓
Click Save
↓
EventEmitter
↓
Parent Dashboard Refreshes
Benefits of Components
Reusable
Easy to Maintain
Independent
Testable
Modular
2. Custom Directives
What is a Directive?
Directives change the appearance or behavior of HTML elements.
Angular has three types of directives:
Component Directives
Structural Directives
Attribute Directives
Structural Directives
These change the DOM structure.
Examples
*ngIf
*ngFor
*ngSwitch
Example
<div *ngIf="isAdmin">
Admin Panel
</div>
Attribute Directives
Change appearance.
Example
ngStyle
ngClass
<div
[ngStyle]="{'color':'red'}">
Employee
</div>
Custom Attribute Directive
Suppose HR wants employees with low performance highlighted in red.
Create Directive
ng generate directive highlight
highlight.directive.ts
import {
Directive,
ElementRef,
HostListener
} from '@angular/core';
@Directive({
selector:'[appHighlight]'
})
export class HighlightDirective{
constructor(private element:ElementRef){}
@HostListener('mouseenter')
onMouseEnter(){
this.element.nativeElement.style.backgroundColor="yellow";
}
@HostListener('mouseleave')
onMouseLeave(){
this.element.nativeElement.style.backgroundColor="white";
}
}
Use Directive
<p appHighlight>
Employee Name
</p>
Output
Mouse Hover
↓
Yellow Background
Mouse Leave
↓
White Background
Real-Time Banking Example
Low Balance
↓
Highlight Red
High Balance
↓
Highlight Green
Permission Directive Example
Only Managers can view salary.
<div *appHasRole="'Manager'">
Salary Details
</div>
Custom Directive
@Input()
appHasRole:string="";
Real-Time
Employee Login
↓
Role = Employee
↓
Salary Hidden
Manager
Role = Manager
↓
Salary Visible
Benefits of Directives
Reusable Behavior
Clean HTML
Better Readability
Centralized UI Logic
3. Custom Pipes
What is a Pipe?
Pipes transform data before displaying it.
Original data remains unchanged.
Example
Mahesh
↓
MAHESH
Built-in Pipes
uppercase
lowercase
date
currency
json
slice
percent
titlecase
Example
{{salary | currency}}
Output
₹45,000.00
Custom Pipe
Suppose HR wants Employee IDs displayed with prefix.
101
↓
EMP-101
Generate Pipe
ng generate pipe employeeid
employeeid.pipe.ts
import {
Pipe,
PipeTransform
} from '@angular/core';
@Pipe({
name:'employeeid'
})
export class EmployeeidPipe
implements PipeTransform{
transform(value:number){
return "EMP-"+value;
}
}
Use Pipe
{{101 | employeeid}}
Output
EMP-101
Banking Example
Original
10001
Display
ACC-10001
Pipe
return "ACC-"+value;
Mask Account Number Pipe
Original
1234567890123456
Display
************3456
Pipe
transform(value:string){
return "************"+
value.slice(-4);
}
HTML
{{accountNumber | accountmask}}
Output
************3456
Real-Time Employee Example
Employee Object
employee={
id:101,
name:"Mahesh",
salary:75000,
joiningDate:new Date()
}
HTML
ID
{{employee.id | employeeid}}
<br>
Name
{{employee.name | uppercase}}
<br>
Salary
{{employee.salary | currency:'INR'}}
<br>
Joining
{{employee.joiningDate | date:'dd/MM/yyyy'}}
Output
ID : EMP-101
Name : MAHESH
Salary : ₹75,000
Joining : 15/03/2025
Complete Real-Time Architecture
Employee Portal
Angular
│
┌───────────────┼────────────────┐
│ │ │
Component Directive Pipe
│ │ │
Employee Highlight Currency
Login Permission Date
Dashboard Validation Employee ID
Attendance Tooltip Account Mask
Leave Hover Effect Uppercase
Components vs Directives vs Pipes
| Feature | Component | Directive | Pipe |
|---|---|---|---|
| Purpose | Build UI | Modify behavior or appearance | Transform displayed data |
| Has HTML Template | Yes | No | No |
| Reusable | Yes | Yes | Yes |
| Used In | Screens and UI sections | HTML elements | Data binding expressions |
| Example | Employee List | Highlight invalid fields | Currency, Date, Masking |
Real-Time Project Example (Employee Management)
| Requirement | Angular Feature | Example |
|---|---|---|
| Employee Dashboard | Component | <app-dashboard> |
| Employee Details | Component | <app-employee-details> |
| Highlight overdue tasks | Directive | appHighlight |
| Restrict manager-only content | Directive | appHasRole |
| Format Employee ID | Pipe | employeeid |
| Display Salary | Built-in Pipe | currency |
| Format Joining Date | Built-in Pipe | date |
| Mask Aadhaar/Account Number | Custom Pipe | accountmask |
Common Interview Questions
1. What is the difference between a Component and a Directive?
Answer: A component has its own template, styles, and logic to create a part of the UI. A directive does not have its own view; it only changes the behavior or appearance of existing DOM elements.
2. When should you create a custom directive?
Answer: When the same UI behavior (such as role-based visibility, hover effects, validation styling, or highlighting) is needed across multiple components.
3. When should you create a custom pipe?
Answer: When the same data formatting logic (such as masking account numbers, formatting employee IDs, or custom text transformations) is reused in multiple templates.
4. Are pipes suitable for heavy business logic?
Answer: No. Pipes should only be used for presentation logic. Complex business logic belongs in services or components.
5. How do Components, Directives, and Pipes work together?
Answer: Components build the UI, directives add reusable behavior to elements, and pipes format the displayed data, resulting in clean, maintainable, and reusable Angular applications.
