Implementing the Summary Design Sample in Angular

Summary Technique sample is a well-liked design sample utilized in Angular purposes. It’s a behavioral design sample that defines a skeletal construction of an algorithm in an operation, leaving the implementation particulars to be stuffed in by the sub-classes. On this weblog, we are going to discover the Summary Technique sample in Angular and the way it may be carried out in our purposes.

Additionally learn:

First, let’s perceive what an Summary Technique sample is.

Summary Technique sample is a technique to outline a set of strategies that should be carried out by the sub-classes. It’s a template methodology sample that defines the steps of an algorithm however leaves the implementation of the steps to be outlined by the sub-classes. The Summary Technique sample is helpful in conditions the place a set of objects have some frequent habits, however additionally they have some completely different habits that must be outlined within the sub-classes.

The Summary Technique sample is a design sample in TypeScript that gives an summary base class which incorporates a number of summary strategies. These summary strategies are then carried out by concrete subclasses, which give the particular implementation particulars for the summary strategies. This sample is helpful if you need to outline a set of behaviors that should be carried out by concrete subclasses, however you don’t need to specify the implementation particulars within the base class.

One of many key advantages of the Summary Technique sample is that it means that you can outline a set of behaviors that should be carried out by concrete subclasses, whereas nonetheless offering some frequent performance that may be shared throughout all subclasses. This will make it simpler to keep up your code over time, since you’ll be able to replace the frequent performance within the summary base class with out having to change every particular person subclass.

One other advantage of the Summary Technique sample is that it could assist to implement good design practices because it requires that subclasses implement particular strategies in a constant means. This can assist to make sure that your code is extra predictable and fewer liable to errors or sudden habits.

When utilizing the Summary Technique sample, it’s vital to take into account that summary strategies should be carried out by all concrete subclasses. If a subclass fails to implement an summary methodology, you’ll get a compilation error, which can assist catch bugs early within the improvement course of.

Along with defining summary strategies, the Summary Technique sample may also be used to outline summary properties. Summary properties are just like summary strategies, however as a substitute of defining a technique signature, they outline a property signature. This may be helpful if you need to be certain that a property is carried out by all subclasses, however you don’t need to present a default implementation within the summary base class.

By defining an summary base class that incorporates frequent performance and a number of summary strategies, we are able to create a set of concrete subclasses that present particular implementations for every methodology. This enables us to reuse frequent performance throughout a number of parts, whereas nonetheless permitting every element to be personalized as wanted.

? Professional Tip: You may bundle your Summary and Derived courses right into a module that you just isolate and publish utilizing Bit, then use throughout all of your initiatives with a easy npm set up, and import. This promotes code reusability and cuts down on bloat.

Study extra right here:

Suppose we’ve got a set of UI parts that every one must show some frequent knowledge, however every element must show that knowledge in a barely completely different means. For instance, we would have a desk element, a card element, and an inventory element, every of which must show an inventory of customers in a unique format.

To implement this performance utilizing the Summary Technique sample, we would begin by defining an summary base class that incorporates the frequent performance for fetching and displaying the info. Right here’s an instance of what which may appear to be:

import { Element, OnInit } from '@angular/core';
summary class UserListComponent implements OnInit {
customers: any[];
ngOnInit(): void {
this.fetchUsers();
}
summary fetchUsers(): void;
summary displayUsers(): void;
}

On this instance, we’ve outlined an summary class referred to as UserListComponent that extends the Angular Element class and implements the OnInit interface. This class incorporates two summary strategies, fetchUsers and displayUsers, that we’ll use to outline the particular performance for every of our UI parts.

// Create a concrete subclass for a desk element
@Element({
selector: 'app-table',
templateUrl: './desk.element.html',
styleUrls: ['./table.component.css']
})
export class TableComponent extends UserListComponent {
fetchUsers(): void {
// Fetch customers knowledge from API and retailer it within the 'customers' property
}
displayUsers(): void {
// Show customers knowledge in a desk format
}
}
-----------------------------------------------------------------------
// Create a concrete subclass for a card element
@Element({
selector: 'app-card',
templateUrl: './card.element.html',
styleUrls: ['./card.component.css']
})
export class CardComponent extends UserListComponent {
fetchUsers(): void {
// Fetch customers knowledge from API and retailer it within the 'customers' property
}
displayUsers(): void {
// Show customers knowledge in a card format
}
}
-----------------------------------------------------------------------
// Create a concrete subclass for an inventory element
@Element({
selector: 'app-list',
templateUrl: './listing.element.html',
styleUrls: ['./list.component.css']
})
export class ListComponent extends UserListComponent {
fetchUsers(): void {
// Fetch customers knowledge from API and retailer it within the 'customers' property
}
displayUsers(): void {
// Show customers knowledge in an inventory format
}
}

We’ve then created three concrete subclasses of UserListComponent, one for every of our UI parts: a desk element, a card element, and an inventory element. Every of those subclasses extends UserListComponent and supplies a selected implementation for the fetchUsers and displayUsers strategies.

Through the use of the Summary Technique sample, we are able to create a set of reusable parts that share frequent performance whereas nonetheless permitting every element to supply its personal distinctive habits. This makes our code extra maintainable, extensible, and simpler to know.

Let’s say we need to show all three views on the identical web page, facet by facet. We will obtain this by making a mother or father element that merely contains the three little one parts:

@Element({
selector: 'app-user-list',
templateUrl: './user-list.element.html',
styleUrls: ['./user-list.component.css']
})
export class UserListComponent {
constructor() { }
}
<div class="user-list-container">
<app-table></app-table>
<app-list></app-list>
<app-tile></app-tile>
</div>

This strategy permits us to maintain the code for every view separate and arranged, whereas nonetheless permitting us to show all of them collectively in a single web page or view.

Let’s say we need to add a search function to our person listing element. We will outline a brand new summary methodology searchUsers in our UserListComponent:

export summary class UserListComponent implements OnInit {
customers: Consumer[] = [];
constructor() { }
ngOnInit() {
this.fetchUsers();
}
summary fetchUsers(): void;
summary displayUsers(): void;
summary searchUsers(time period: string): void;
}

Now every of our little one parts can implement this methodology in their very own means. Right here’s an instance implementation for the TableComponent:

@Element({
selector: 'app-table',
templateUrl: './desk.element.html',
styleUrls: ['./table.component.css']
})
export class TableComponent extends UserListComponent {
searchUsers(time period: string): void {
// Filter customers knowledge primarily based on search time period
this.customers = this.customers.filter(person => person.title.toLowerCase().contains(time period.toLowerCase()));
this.displayUsers();
}
fetchUsers(): void {
// Fetch customers knowledge from API and retailer it within the 'customers' property
}
displayUsers(): void {
// Show customers knowledge in a desk format
}
}

<div class="user-list-container">
<app-table></app-table>
<app-list></app-list>
<app-tile></app-tile>
</div>
<app-search (search)="onSearch($occasion)"></app-search>

Right here, we’ve added a search bar element (app-search) to our web page and outlined an occasion handler onSearch that calls the searchUsers methodology on the at the moment displayed little one element. The search occasion emitted by the search bar element incorporates the search time period entered by the person.

In abstract, the Summary Technique sample could be a highly effective software for creating modular and reusable code in an Angular software, particularly when working with a number of parts that must share a standard interface or habits. By defining an summary base class with summary strategies and having a number of parts prolong and implement these strategies, we are able to obtain a excessive diploma of flexibility and maintainability in our code.

General, the Summary Technique sample could be a useful gizmo for designing object-oriented techniques in TypeScript. By defining summary strategies in an summary base class, you’ll be able to be certain that your code is extra versatile, extensible, and maintainable over time.