Building A Custom Pipe In Angularjs 2


Hello everybody,

today I want to write few words about custom pipes in ... AngularJS 2. The first time when I've heard about custom pipes happened to be when I've learned powershell scripting. And recently I've discovered that there are some built in custom pipes in AngularJS 2 and we can make our own custom pipes. 

What is needed for implementing custom pipes? Nothing special. Just import from AngularJS 2 PipeTransform and implement in it method transform. And one more is pipe decorator ( in my example something that starts from @Pipe and ends with first }) ). And what else? Of course import statements.

It can look like this:

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

@Pipe({name: 'studentsFilter'})

export class StudentFilterPipe

             implements PipeTransform {

                transform(value: IStudent[], filterBy: string) : IStudent[]{



And that almost it. You have custome pipe for Students. 

Then in html code it will look like this:

<tr *ngFor='let student of students | studentsFilter : studFilter'

No Comments

Add a Comment


Comments are closed