Principles Of SOLID: Open-Closed Principle For Superior Development Ensured

SOLID: The First 5 Principles of Object-Oriented Design

In software development, we encounter numerous scenarios where our codebase is not scalable enough. That kind of behaviour could cause problems in future that will be very difficult to maintain.

The SOLID idea gives you a set of 5 rules that are:

The Single-Responsibility principle (SRP)
The Open-closed principle
The Liskow Substitution principle (LSP)
The Interface Segregation principle (ISP)
The Dependency Injection principle (DIP)

Open-closed principle in Angular

This is Part 2 of the Open-closed principle in Angular. If you would first like to read Part 1 click here

Fixing the violation

Fixing OCP violation is to add customer details in order to separate the concerns. We can just simply create UserDetailsComponent to display additional information about the customer.

Example Code snippet

@Component({
selector: 'app-customer-details',
standalone: true,
imports: [CommonModule],
templateUrl: './customer-details.component.html',
styleUrl: './customer-details.component.scss'
})
export class CustomerDetailsComponent {
customer = input.required<Customer>()
}

And it’s template:

Example Code snippet

@if(customer(); as customer) {<strong>Address:</strong> {{ customer.address }}

<strong>City:</strong> {{ customer.address }}

}

Then we have to update our CustomerListComponent by adding CustomerDetailsComponent in to list of imports.

Example Code snippet

@Component({
...
imports: [CommonModule,CustomerDetailsComponent],
...
})

We also have to add feature to our template:

Example Code snippet

<table>
<thead>
<tr>
<th>First name</th>
<th>Last name</th>
<th>ID</th>
</tr>
</thead>
<tbody>
@for(customer of customers$ | async; track customer) {
<tr>
<td>{{ customer.firstName }}</td>
<td>{{ customer.lastName }}</td>
<td>{{ customer.id }}</td>
<td>
<button (click)="customer.showDetails = !customer.showDetails">
{{ customer.showDetails ? 'Hide Details' : 'Show Details' }}
</button>
@if(customer.showDetails) {
<app-customer-details [customer]="customer"/>
}</td>
</tr>
}</tbody>

And update our Customer model.

Example Code snippet

export interface Customer {
firstName: string;
lastName: string;
id: string;
address: string;
houseNumber: string;
showDetails: boolean;
}

This method ensures that we have separation of concern and all our components are responsible for one thing and one thing only.

The CustomerListComponent doesn’t need to be modified in order to add new functionalities, because UserDetailsComponent can be easily extended to display additional information.

Conclusion

PRO TIP 1

Reduces code cupling

PRO TIP 2

Improves code scalability

PRO TIP 3

Makes code more reusable

This is Part 2 of the Open-closed principle in Angular.

You can also read our post on First principle of Solid – Single Responsibility Principle here

News

How To Unleash Innovation with External IT Department09/09/2024 - 08:00
Smart Family Meet 2024 – A Thrilling Adventure of Passion and Technology08/19/2024 - 08:30
Principles Of SOLID: Open-Closed Principle For Superior Development Ensured08/05/2024 - 08:30
Principles Of SOLID: Open-Closed Principle You Need To Apply07/30/2024 - 15:58

SOLID: The First 5 Principles of Object-Oriented Design

The Single-Responsibility principle (SRP)

The Open-closed principle

The Liskow Substitution principle (LSP)

The Interface Segregation principle (ISP)

The Dependency Injection principle (DIP)

Open-closed principle in Angular

Fixing the violation

Conclusion

AVS solutions

Sitemap

location

News

Principles Of SOLID: Open-Closed Principle For Superior Development Ensured

SOLID: The First 5 Principles of Object-Oriented Design

The Single-Responsibility principle (SRP)

The Open-closed principle

The Liskow Substitution principle (LSP)

The Interface Segregation principle (ISP)

The Dependency Injection principle (DIP)

Open-closed principle in Angular

Fixing the violation

Conclusion

Share this entry

AVS solutions

Sitemap

location

Follow us

News