Angular 4 Tutorial: Create Custom Pipes Using CLI Example
Custom Pipes in Angular 4
In this Angular 4 Tutorial i will show you how to generate and create custom pipes in Angular using the CLI by creating a custom sort pipe example.
Angular 4 QuickStart Tutorial Playlist
• Angular 4 QuickStart Tutorial
Angular 4 Pipes Example
• Angular 4 Pipes Tutorial with Examples
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.
app.component.ts
countries = ['Poland', ,'Nepal', 'Egypt', 'USA','India', 'Argentina']
sort.pipe.ts
I added the colored code:
import { Pipe, PipeTransform } from '@angular/core';
@Pipe({
name: 'sort'
})
export class SortPipe implements PipeTransform {
transform(value: any, args?: any): any {
return value.sort() ;
}}
app.component.html
{{countries | sort}}
