Create Custom Pipe in Angular 4

Create Custom Pipe in Angular

Watch Angular 4 Custom Pipe Video Tutorial

Custom Pipe in Angular 4

In Angular 4 you can create your own pipes as well as using the built-in ones.

Create your first Angular pipe

Run below command from the cmd while inside the working project folder. 'replace nameOfPipe with your pipe name'

ng g pipe nameOfPipe

By running above command the CLI will generate all the files while adding all required code.


countries = ['Poland', ,'Nepal', 'Egypt', 'USA','India', 'Argentina']


I added the colored code:

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

name: 'sort'
export class SortPipe implements PipeTransform {
transform(value: any, args?: any): any {
return value.sort() ;


<h1>{{countries | sort}}</h1>



Subscribe to
for video tutorials updates