Angular 5 Create New Pipe 14.04.2018

Hi there friends, let me show you an example of how to create new pipes (Filters) in Angular. 

In this example we create a new pipe which removes last desired number of characters from a string.

1.) run angular-cli command to create a new pipe:

ng g pipe common/pipes/removeLastChars --skip-import

2.) Register this new pipe to AppModule.

3.) Codes:


import { Pipe, PipeTransform } from '@angular/core';

@Pipe({
name: 'removeLastChars'
})
export class RemoveLastCharsPipe implements PipeTransform {

transform(value: any, args?: any): any {
let removed = value.substr(0, value.length - args);
return removed;
}

}

Value parameter references the value to be filtered,

args parameter references the character number to be removed.

HTML:

{{valueToBeFiltered | removeLastChars:'3'}}

That's all, have nice coding :)