We are currently working on an Angular application that has many different types of domain specific objects all of which have a common set of base attributes, “isDeleted” and “title” to name a few.
[code language=”javascript”]
export interface EntityDomainModelBase {
code: string;
title?: string;
isDeleted?: boolean;
}
[/code]
There are a few areas within the application that will need to filter arrays of the domain specific objects by both some domain specific attributes and also by the base attributes. A base Angular “pipe” class was created to encapsulate the plumbing of the filter and the filter logic for the common base attributes, along with the delegation to the domain specific subclass.
[code language=”javascript”]
import { PipeTransform } from ‘@angular/core’;
import { EntityDomainModelBase } from ‘./api/DomainModelBase’;
export class DomainModelArrayFilterPipeContext {
viewDeleted: boolean;
searchTerm: string;
}
export class DomainModelArrayFilterPipe<typeOfEntity extends EntityDomainModelBase>
implements PipeTransform
{
transform(entities: typeOfEntity[], ctx: DomainModelArrayFilterPipeContext) {
if (!ctx)
return entities;
if (!entities || !entities.length)
return entities;
return entities.filter((item: typeOfEntity) => {
return (ctx.viewDeleted == undefined || item.isDeleted == ctx.viewDeleted)
&& (ctx.searchTerm == undefined || ctx.searchTerm == ”
|| item.title.toLowerCase().indexOf(ctx.searchTerm.toLowerCase()) >= 0
|| this.checkTerm(item, ctx.searchTerm)
);
});
}
/*
implement in domain specific filter class to filter on domain specific attributes
*/
checkTerm(item: typeOfEntity, searchTerm: string): boolean { return true; }
}
[/code]
A domain specific subclass was then created and used like any other “@pipe” attributed class. This domain specific pipe implementation also filters through an array of persons for a specific name.
[code language=”javascript”]
@Pipe({ name: ‘domainSpecificObjectFilter’ })
export class DomainSpecificFilterPipe extends DomainModelArrayFilterPipe<SomeDomainModel> {
checkTerm(item: SomeDomainModel, searchTerm: string): boolean {
return item.persons.filter(p => p.name.toLowerCase().indexOf(searchTerm.toLowerCase()) >= 0).length > 0;
}
}
[/code]
The filter classes above are then used to filter a list of domain specific objects and draw the appropriate HTML.
[code language=”html”]
<ng-container *ngFor="let event of (events | eventsFilter:filterContext)">
[/code]
With this design any number of domain specific filtering scenarios can be addressed without having to duplicate the common argument checking and array filtering logic.