Angular 4 Tutorial: Create Custom Pipes Using CLI Example

Veröffentlicht am: 06 Juni 2017
auf dem Kanal: DotsWay
3,123
17

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}}


Auf dieser Seite können Sie das Online-Video Angular 4 Tutorial: Create Custom Pipes Using CLI Example mit der Dauer stunde minuten sekunde in guter Qualität ansehen, das der Benutzer DotsWay 06 Juni 2017 hochgeladen hat, den Link mit Freunden und Bekannten teilen, dieses Video wurde auf Youtube bereits 3,123 Mal angesehen und es wurde von 17 den Zuschauern gefallen. Viel Spaß beim Betrachtenden Zuschauern gefallen!