Angular Pipes

Installation

To add this package to your application, run:

npm i @microexcel-csd/angular-pipes

Add the AngularPipesModule to your AppModule imports array:

@ngModule({
    ...
    imports: [
        ...
        AngularPipesModule
    ],

Usage

filterBy

The following illustrates use of the filterBy pipe:

<div *ngFor="let user of users | filterBy: 'name': ['John', 'Josh']">
    ...
</div>

This filters a list of objects by the property of 'name' and returns only the objects that have the value of 'John' or 'Josh'. Any number of elements can be contained in the filters.

searchFilterBy

The following illustrates use of the searchFilterBy pipe:

<div *ngFor="let user of users | searchFilterBy: ['name', 'age']: searchQuery">
    ...
</div>

This is similar to the filterBy pipe, but is also case-insensitive. In this example, searchQuery is a variable in the component. The list will be filtered by the properties of 'name' and 'age' and will return only the objects that match the substring contained in searchQuery.

orderBy

The following illustrates use of the orderBy pipe:

<div *ngFor="let user of users | orderBy: sortedColumn: !sortDescending">
    ...
</div>

This pipe orders the list of objects by a property name and sorts them ascending (if value is false) or descending (if value is true). sortedColumn is a variable in the component containing the property name as a string. Likewise sortDescending is a boolean that tells the pipe to return the list ascending or descending.

Support Our Packages