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
• Playlist
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}}
On this page of the site you can watch the video online Angular 4 Tutorial: Create Custom Pipes Using CLI Example with a duration of hours minute second in good quality, which was uploaded by the user DotsWay 06 June 2017, share the link with friends and acquaintances, this video has already been watched 3,123 times on youtube and it was liked by 17 viewers. Enjoy your viewing!
