Design patterns are reusable solutions to common problems that arise in software development. They provide a common language and structure for developers, making it easier to build and maintain large-scale applications. In Angular development, design patterns play a crucial role in creating efficient, scalable, and maintainable applications.
Angular provides a rich set of features and tools that make it easy to implement design patterns in your applications. Some of the most popular Angular design patterns include Model-View-Controller (MVC), Model-View-ViewModel (MVVM), Service Layer, Dependency Injection, Repository, Factory, Singleton, Observer, and Decorator. Each of these patterns provides a unique solution to a common problem and can be used in combination to create highly optimized and scalable applications.
The use of design patterns in Angular development has several benefits, including improved maintainability, testability, and scalability. Design patterns help to separate the concerns of different parts of the application, making it easier to understand, test, and maintain. Additionally, design patterns provide a common language and structure for developers, making it easier to collaborate and share knowledge.
We will go through the following design patterns and discuss how these can be used in Angular application examples.
- Lazy Loading
- State Management
- Singleton
- Model-View-Controller (MVC)
- Factory
- Observer
- Decorator
- Dependency Injection
- Facade
- Adapter
- Proxy
- Flyweight
- Command
- Mediator
- Iterator
#1 Lazy Loading
The Lazy Loading design pattern is a technique used to load parts of an application only when they are needed, rather than loading all components upfront. This can improve the performance of the application by reducing the initial loading time and reducing the amount of memory required to run the application.
Example: To implement Lazy Loading in Angular, you can use the “loadChildren” property in the routing configuration. Here is an example code for lazy loading a module in Angular:
const routes: Routes = [
{
path: 'dashboard',
loadChildren: () => import('./dashboard/dashboard.module').then(m => m.DashboardModule)
},
{
path: '',
redirectTo: '/dashboard',
pathMatch: 'full'
}
];
@NgModule({
imports: [RouterModule.forRoot(routes)],
exports: [RouterModule]
})
export class AppRoutingModule { }The “DashboardModule” will only be loaded when the user navigates to the “dashboard” route. This allows for the application to start up faster and use less memory, as only the necessary components are loaded.
#2 State Management
State management design pattern is a technique used to manage the state of an application. This includes the data and variables that change over time, as well as the user interface. State management is important in Angular development because it helps to maintain a consistent and predictable state for the application, which can improve performance and make the application easier to maintain.
Example: One popular state management pattern in Angular is the use of a centralized store, such as NgRx Store. NgRx Store is a state management library that implements the Redux pattern. Here is an example code for using NgRx Store in Angular:
// app.module.ts
import { StoreModule } from '@ngrx/store';
import { reducers } from './reducers';
@NgModule({
imports: [
StoreModule.forRoot(reducers)
]
})
export class AppModule { }
// actions.ts
import { createAction, props } from '@ngrx/store';
export const increment = createAction('[Counter Component] Increment');
export const decrement = createAction('[Counter Component] Decrement');
// reducers.ts
import { createReducer, on } from '@ngrx/store';
import { increment, decrement } from './actions';
export const initialState = 0;
export const counterReducer = createReducer(initialState,
on(increment, state => state + 1),
on(decrement, state => state - 1)
);
// component.ts
import { select, Store } from '@ngrx/store';
import { increment, decrement } from './actions';
@Component({
selector: 'app-counter',
template: `
<button (click)="decrement()">-</button>
{{ count }}
<button (click)="increment()">+</button>
`
})
export class CounterComponent {
count$ = this.store.pipe(select(state => state.count));
constructor(private store: Store) {}
increment() {
this.store.dispatch(increment());
}
decrement() {
this.store.dispatch(decrement());
}
}We have two actions, increment and decrement, which are used to update the state of the application. The counterReducer uses the createReducer function from the @ngrx/store library to define how the state should change in response to each action. The initialState is set to 0, which represents the starting state of the application.
#3 Singleton
The Singleton design pattern is a creational pattern that ensures a class has only one instance, while providing a global access point to this instance. This can be useful in Angular development when you want to share data between components or have a single source of truth for certain state.
Example: In Angular, the Singleton pattern can be implemented using a shared service. Here is an example code for using a shared service in Angular:
// user.service.ts
import { Injectable } from '@angular/core';
@Injectable({
providedIn: 'root'
})
export class UserService {
private user: any;
setUser(user: any) {
this.user = user;
}
getUser() {
return this.user;
}
}
// component-1.ts
import { Component } from '@angular/core';
import { UserService } from './user.service';
@Component({
selector: 'app-component-1',
template: `
<button (click)="setUser()">Set User</button>
`
})
export class Component1 {
constructor(private userService: UserService) {}
setUser() {
this.userService.setUser({
name: 'John Doe'
});
}
}
// component-2.ts
import { Component } from '@angular/core';
import { UserService } from './user.service';
@Component({
selector: 'app-component-2',
template: `
{{ user | json }}
`
})
export class Component2 {
user: any;
constructor(private userService: UserService) {
this.user = this.userService.getUser();
}
}UserService is a shared service that acts as a Singleton. The setUser method is used to set the user data, which is then accessible using the getUser method from any component in the application.
This allows components to share the same user data without having to pass it between components, as the data is stored in a single instance of the UserService.
#4 Model-View-Controller (MVC)
The Model-View-Controller (MVC) design pattern is a structural pattern that separates the application logic into three interconnected components: the Model, the View, and the Controller. The Model represents the data, the View is responsible for displaying the data, and the Controller handles the interactions between the Model and the View.
Example: In Angular, the MVC pattern can be implemented using Components and Services. Here is an example code for using the MVC pattern in Angular:
// user.model.ts
export interface User {
name: string;
age: number;
}
// user.service.ts
import { Injectable } from '@angular/core';
import { User } from './user.model';
@Injectable({
providedIn: 'root'
})
export class UserService {
private users: User[] = [
{ name: 'John Doe', age: 30 },
{ name: 'Jane Doe', age: 25 }
];
getUsers() {
return this.users;
}
}
// user-list.component.ts
import { Component } from '@angular/core';
import { UserService } from './user.service';
import { User } from './user.model';
@Component({
selector: 'app-user-list',
template: `
<ul>
<li *ngFor="let user of users">
{{ user.name }} ({{ user.age }} years old)
</li>
</ul>
`
})
export class UserListComponent {
users: User[];
constructor(private userService: UserService) {
this.users = this.userService.getUsers();
}
}User is the Model, UserListComponent is the View, and UserService is the Controller. The UserService retrieves the data (the Model), and the UserListComponent displays the data (the View). The UserListComponent communicates with the UserService to get the data, and the UserService acts as the intermediary between the UserListComponent and the data.
This separation of responsibilities ensures that changes to the Model do not affect the View, and changes to the View do not affect the Model.
#5 Factory
The Factory design pattern is a creational pattern that provides a way to create objects without specifying the exact class of object that will be created. Instead, it uses a factory method to create objects. This pattern separates the responsibilities of creating objects from the responsibilities of using those objects.
Example: In Angular, the Factory pattern can be implemented using services and dependency injection. Here is an example code for using the Factory pattern in Angular:
// log.service.ts
import { Injectable } from '@angular/core';
@Injectable({
providedIn: 'root'
})
export class LogService {
logs: string[] = [];
log(message: string) {
this.logs.push(message);
console.log(message);
}
}
// user.service.ts
import { Injectable } from '@angular/core';
import { LogService } from './log.service';
import { User } from './user.model';
@Injectable({
providedIn: 'root'
})
export class UserService {
private users: User[] = [
{ name: 'John Doe', age: 30 },
{ name: 'Jane Doe', age: 25 }
];
constructor(private logService: LogService) {}
getUsers() {
this.logService.log('Getting users');
return this.users;
}
}The LogService acts as the factory, creating log messages and storing them in an array. The UserService uses the LogService to log messages, and the LogService is injected into the UserService using Angular’s dependency injection system.
This allows the UserService to use the LogService without having to know the exact implementation details of the LogService. This separation of responsibilities makes it easy to change the LogService without affecting the UserService.
#6 Observer
The Observer design pattern is a behavioral pattern that allows objects to be notified when changes occur within other objects. It allows objects to be notified of changes to other objects without having to tightly couple those objects together.
Example: In Angular, the Observer pattern can be implemented using observables and the Subject class. Here is an example code for using the Observer pattern in Angular:
// user.model.ts
export interface User {
name: string;
age: number;
}
// user.service.ts
import { Injectable } from '@angular/core';
import { Subject } from 'rxjs';
import { User } from './user.model';
@Injectable({
providedIn: 'root'
})
export class UserService {
private users: User[] = [
{ name: 'John Doe', age: 30 },
{ name: 'Jane Doe', age: 25 }
];
userSubject = new Subject<User[]>();
getUsers() {
return this.users;
}
addUser(user: User) {
this.users.push(user);
this.userSubject.next(this.users);
}
}
// user-list.component.ts
import { Component, OnInit } from '@angular/core';
import { UserService } from './user.service';
@Component({
selector: 'app-user-list',
template: `
<ul>
<li *ngFor="let user of users">
{{ user.name }} ({{ user.age }})
</li>
</ul>
`
})
export class UserListComponent implements OnInit {
users: User[];
constructor(private userService: UserService) {}
ngOnInit() {
this.userService.userSubject.subscribe(users => {
this.users = users;
});
this.users = this.userService.getUsers();
}
}
// user-add.component.ts
import { Component } from '@angular/core';
import { UserService } from './user.service';
import { User } from './user.model';
@Component({
selector: 'app-user-add',
template: `
<form (ngSubmit)="onSubmit(userForm)">
<input type="text" name="name" [(ngModel)]="user.name" required />
<input type="number" name="age" [(ngModel)]="user.age" required />
<button type="submit">Add User</button>
</form>
`
})
export class UserAddComponent {
user: User = { name: '', age: null };
constructor(private userService: UserService) {}
onSubmit(form) {
this.userService.addUser(this.user);
this.user = { name: '', age: null };
}
}The UserService acts as the subject, and the UserListComponent and UserAddComponent act as observers. The UserService holds an array of User objects and exposes a Subject that is used to notify subscribers when the list of users is updated.
The UserListComponent subscribes to the userSubject and updates its local users array whenever the subject emits a new value. The UserAddComponent adds a new user to the list of users by calling the addUser method on the UserService, which pushes the new user to the array and notifies the subscribers by calling next on the userSubject.
In this way, the UserListComponent and UserAddComponent can remain decoupled from each other and from the UserService itself, as they only need to know about the userSubject to be notified of changes to the list of users. This allows for loose coupling and more flexible and maintainable code.
#7 Decorator
The Decorator design pattern is a structural pattern that allows you to add new behavior to an existing object dynamically by wrapping it in an object of a decorator class. The decorator class implements the same interface as the original object and adds additional behavior to the original object by delegating to it and providing additional behavior.
Here is an example of the Decorator pattern in TypeScript:
interface Car {
drive(): void;
}
class BasicCar implements Car {
drive(): void {
console.log("Driving a basic car");
}
}
class CarDecorator implements Car {
constructor(protected car: Car) {}
drive(): void {
this.car.drive();
}
}
class SportsCarDecorator extends CarDecorator {
drive(): void {
console.log("Driving a sports car");
super.drive();
}
}
const myCar = new SportsCarDecorator(new BasicCar());
myCar.drive();We have an interface Car and two classes that implement this interface: BasicCar and SportsCarDecorator. The BasicCar class provides a basic implementation of the drive method, while the SportsCarDecorator class extends the CarDecorator class and adds additional behavior to the original object by wrapping it in an object of the SportsCarDecorator class and calling the drive method on the wrapped object.
When we call the drive method on an instance of SportsCarDecorator, it outputs the message “Driving a sports car” before calling the drive method on the original object, effectively decorating it with new behavior.
#8 Dependency Injection
Dependency Injection is a software design pattern that allows an object to receive its dependencies from an external source instead of creating them itself. This makes it possible to decouple the objects from each other and makes the code more maintainable, testable and flexible.
Example of Dependency Injection in Angular:
import { Injectable } from '@angular/core';
@Injectable({
providedIn: 'root'
})
export class UserService {
getUsers(): string[] {
return ['User 1', 'User 2', 'User 3'];
}
}
@Component({
selector: 'app-user-list',
template: '<ul><li *ngFor="let user of users">{{ user }}</li></ul>'
})
export class UserListComponent {
users: string[];
constructor(private userService: UserService) {
this.users = this.userService.getUsers();
}
}We have a UserService that provides a list of users and a UserListComponent that displays the list of users. The UserListComponent receives the UserService as a dependency by using the constructor and declaring it with the private keyword. The UserService is defined as an injectable service by using the @Injectable decorator and registering it in the root module.
When the UserListComponent is instantiated, it receives the UserService instance as a constructor argument, allowing it to use the UserService to retrieve the list of users and display them in the template. This makes the code more flexible and maintainable as it is possible to change the implementation of the UserService without affecting the UserListComponent.
#9 Facade
Facade is a design pattern that provides a unified interface to a set of complex and interrelated objects. It simplifies the usage of these objects and hides their implementation details from the client. This makes it easier to use the objects and increases the maintainability and modularity of the code.
Example of Facade design pattern in Angular:
import { Injectable } from '@angular/core';
@Injectable({
providedIn: 'root'
})
export class UserService {
getUsers(): string[] {
return ['User 1', 'User 2', 'User 3'];
}
}
@Injectable({
providedIn: 'root'
})
export class LoggerService {
log(message: string) {
console.log(message);
}
}
@Injectable({
providedIn: 'root'
})
export class UserFacade {
constructor(private userService: UserService, private loggerService: LoggerService) {}
getUsers() {
this.loggerService.log('Getting users');
return this.userService.getUsers();
}
}
@Component({
selector: 'app-user-list',
template: '<ul><li *ngFor="let user of users">{{ user }}</li></ul>'
})
export class UserListComponent {
users: string[];
constructor(private userFacade: UserFacade) {
this.users = this.userFacade.getUsers();
}
}A UserService that provides a list of users, a LoggerService that logs messages and a UserFacade that serves as a unified interface to these services. The UserFacade receives both the UserService and LoggerService as dependencies and provides a simplified method getUsers to retrieve the list of users.
The UserListComponent receives the UserFacade as a dependency and uses it to retrieve the list of users, hiding the implementation details of the UserService and LoggerService. This makes the code more maintainable and modular as it is possible to change the implementation of the UserService and LoggerService without affecting the UserListComponent.
#10 Adapter
Adapter is a design pattern that allows objects with incompatible interfaces to work together. It acts as a bridge between two objects and provides a unified interface that the client can use. This allows objects to work together even if they have different interfaces and implementations.
Example:
import { Injectable } from '@angular/core';
export interface User {
id: number;
name: string;
}
export class UserApi {
getUsers(): User[] {
return [
{ id: 1, name: 'User 1' },
{ id: 2, name: 'User 2' },
{ id: 3, name: 'User 3' }
];
}
}
@Injectable({
providedIn: 'root'
})
export class UserService {
constructor(private userApi: UserApi) {}
getUsers(): string[] {
return this.userApi.getUsers().map(user => user.name);
}
}
@Component({
selector: 'app-user-list',
template: '<ul><li *ngFor="let user of users">{{ user }}</li></ul>'
})
export class UserListComponent {
users: string[];
constructor(private userService: UserService) {
this.users = this.userService.getUsers();
}
}The UserApi class provides a list of users with an id and a name. The UserService acts as an adapter and receives the UserApi as a dependency. The UserService provides a unified interface getUsers that returns an array of user names. This allows the UserListComponent to use the UserService without having to worry about the implementation details of the UserApi.
The UserListComponent only receives the UserService as a dependency and uses it to retrieve the list of user names, making it possible to change the implementation of the UserApi without affecting the UserListComponent.
#11 Proxy
The Proxy design pattern provides a surrogate or placeholder for another object to control access to it. The proxy object acts as an intermediary between the client and the real object, allowing the client to access the real object only if certain conditions are met. This can be used for tasks such as authentication, logging, and caching.
Example of the Proxy design pattern in Angular:
import { Injectable } from '@angular/core';
export interface User {
id: number;
name: string;
}
export class UserApi {
getUsers(): User[] {
return [
{ id: 1, name: 'User 1' },
{ id: 2, name: 'User 2' },
{ id: 3, name: 'User 3' }
];
}
}
@Injectable({
providedIn: 'root'
})
export class UserService {
constructor(private userApi: UserApi) {}
getUsers(): User[] {
console.log('Fetching users...');
return this.userApi.getUsers();
}
}
@Injectable({
providedIn: 'root'
})
export class UserServiceProxy {
constructor(private userService: UserService) {}
getUsers(): User[] {
console.log('Checking cache...');
let users = localStorage.getItem('users');
if (!users) {
console.log('Cache miss, fetching users...');
users = this.userService.getUsers();
localStorage.setItem('users', JSON.stringify(users));
} else {
console.log('Cache hit, returning users...');
users = JSON.parse(users);
}
return users;
}
}
@Component({
selector: 'app-user-list',
template: '<ul><li *ngFor="let user of users">{{ user.name }}</li></ul>'
})
export class UserListComponent {
users: User[];
constructor(private userServiceProxy: UserServiceProxy) {
this.users = this.userServiceProxy.getUsers();
}
}The UserServiceProxy acts as a proxy for the UserService. The UserService is responsible for fetching the list of users from the UserApi. The UserServiceProxy is responsible for checking the cache for the list of users before fetching them from the UserService.
If the list of users is in the cache, it returns the cached list, otherwise it fetches the list from the UserService and stores it in the cache. The UserListComponent receives the UserServiceProxy as a dependency and uses it to retrieve the list of users, making it possible to cache the list of users without affecting the UserListComponent.
#12 Flyweight
The Flyweight design pattern is used to minimize memory usage by sharing data between objects. The idea behind the Flyweight pattern is to store the data that is common to many objects in a single, shared object. This allows multiple objects to share the same data, reducing the amount of memory used by the system.
Here is an example of the Flyweight pattern in Angular:
export interface User {
id: number;
name: string;
avatar: string;
}
const sharedAvatar = 'https://api.adorable.io/avatars/50/';
@Injectable({
providedIn: 'root'
})
export class UserService {
private users: User[] = [
{ id: 1, name: 'User 1', avatar: `${sharedAvatar}1` },
{ id: 2, name: 'User 2', avatar: `${sharedAvatar}2` },
{ id: 3, name: 'User 3', avatar: `${sharedAvatar}3` }
];
getUser(id: number): User {
return this.users.find(user => user.id === id);
}
}
@Component({
selector: 'app-user-avatar',
template: '<img [src]="user.avatar" alt="User Avatar">'
})
export class UserAvatarComponent {
@Input() user: User;
}
@Component({
selector: 'app-user-list',
template: '<app-user-avatar *ngFor="let user of users" [user]="user"></app-user-avatar>'
})
export class UserListComponent {
users: User[];
constructor(private userService: UserService) {
this.users = this.userService.users;
}
}The UserService provides a list of users, where each user has a unique ID and a name, but shares the same avatar URL. The UserAvatarComponent displays the avatar of a single user, and the UserListComponent displays the list of avatars by iterating over the list of users provided by the UserService.
This way, the same avatar URL is shared between all user avatars, reducing memory usage and improving performance.
#13 Command
The Command design pattern is used to encapsulate a request as an object, allowing for loose coupling between the sender of the request and the receiver of the request. This design pattern allows for greater flexibility and modularity, as well as the ability to undo and redo actions.
Example of the Command pattern in Angular:
interface Command {
execute(): void;
undo(): void;
}
@Injectable({
providedIn: 'root'
})
export class BankAccountService {
private balance = 0;
deposit(amount: number): void {
this.balance += amount;
console.log(`Deposited ${amount}. Balance: ${this.balance}`);
}
withdraw(amount: number): void {
this.balance -= amount;
console.log(`Withdrawn ${amount}. Balance: ${this.balance}`);
}
}
export class DepositCommand implements Command {
constructor(private bankAccountService: BankAccountService, private amount: number) {}
execute(): void {
this.bankAccountService.deposit(this.amount);
}
undo(): void {
this.bankAccountService.withdraw(this.amount);
}
}
export class WithdrawCommand implements Command {
constructor(private bankAccountService: BankAccountService, private amount: number) {}
execute(): void {
this.bankAccountService.withdraw(this.amount);
}
undo(): void {
this.bankAccountService.deposit(this.amount);
}
}
@Component({
selector: 'app-bank-account',
template: `
<button (click)="deposit()">Deposit</button>
<button (click)="withdraw()">Withdraw</button>
<button (click)="undo()">Undo</button>
`
})
export class BankAccountComponent {
private commands: Command[] = [];
private current = -1;
constructor(private bankAccountService: BankAccountService) {}
deposit(): void {
const command = new DepositCommand(this.bankAccountService, 100);
command.execute();
this.commands.push(command);
this.current++;
}
withdraw(): void {
const command = new WithdrawCommand(this.bankAccountService, 100);
command.execute();
this.commands.push(command);
this.current++;
}
undo(): void {
if (this.current >= 0) {
const command = this.commands[this.current--];
command.undo();
}
}
}The BankAccountService provides the functionality to deposit and withdraw funds from a bank account. The DepositCommand and WithdrawCommand classes encapsulate these requests as objects, allowing for the undo and redo of these actions through the undo method.
The BankAccountComponent keeps a list of executed commands and the current command index, allowing for undoing and redoing actions through the undo method. This allows for greater flexibility and modularity, as well as the ability to undo and redo actions.
#14 Mediator
The Mediator Design Pattern is a behavioral design pattern that promotes loose coupling between objects. It provides a central point of communication between multiple objects. The objects do not communicate directly with each other, instead they communicate through the mediator.
Example:
Angular provides an implementation of the Mediator pattern in the form of the EventEmitter class. Let’s say we have two components, ComponentA and ComponentB, that need to communicate with each other. Instead of having them communicate directly, we can use a shared service that acts as the mediator.
// mediator.service.ts
import { Injectable, EventEmitter } from '@angular/core';
@Injectable({
providedIn: 'root'
})
export class MediatorService {
public messageReceived = new EventEmitter<string>();
public sendMessage(message: string) {
this.messageReceived.emit(message);
}
}
// component-a.component.ts
import { Component } from '@angular/core';
import { MediatorService } from './mediator.service';
@Component({
selector: 'app-component-a',
template: `
<button (click)="sendMessage('Hello from Component A')">
Send message
</button>
`
})
export class ComponentA {
constructor(private mediatorService: MediatorService) {}
sendMessage(message: string) {
this.mediatorService.sendMessage(message);
}
}
// component-b.component.ts
import { Component } from '@angular/core';
import { MediatorService } from './mediator.service';
@Component({
selector: 'app-component-b',
template: `
<p>{{ message }}</p>
`
})
export class ComponentB {
public message = '';
constructor(private mediatorService: MediatorService) {
this.mediatorService.messageReceived.subscribe(
message => (this.message = message)
);
}
}ComponentA and ComponentB communicate through the shared MediatorService. When ComponentA wants to send a message, it calls the sendMessage() method on the MediatorService. ComponentB subscribes to the messageReceived event on the MediatorService to receive messages. This way, the communication between the two components is centralized and decoupled.
#15 Iterator
The Iterator Design Pattern is a behavioral design pattern that provides a way to access the elements of a collection sequentially without exposing its underlying representation. This pattern is used to hide the implementation details of a collection and simplify the way it is used.
Example:
In Angular, you can use the Iterator pattern to iterate over a collection of data in your template. For example, you can use the *ngFor directive to loop over an array of items in your component and display them in the template.
// app.component.ts
import { Component } from '@angular/core';
@Component({
selector: 'app-root',
template: `
<ul>
<li *ngFor="let item of items">{{ item }}</li>
</ul>
`
})
export class AppComponent {
public items = ['Item 1', 'Item 2', 'Item 3'];
}The *ngFor directive is used to loop over the items array in the AppComponent and display each item in a list item (li) element in the template. The underlying implementation of the array is hidden, and the template only sees the data that it needs to display.
Conclusion
Design patterns play a crucial role in Angular development, providing reusable solutions to common problems and improving the efficiency, scalability, and maintainability of applications. Whether you are a seasoned Angular developer or just starting out, understanding and applying design patterns is essential for building high-quality applications.
