Angular 4 Tutorial: Create Custom Pipes Using CLI Example

Pubblicato il: 06 giugno 2017
sul canale di: 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}}


In questa pagina del sito puoi guardare il video online Angular 4 Tutorial: Create Custom Pipes Using CLI Example della durata di ore minuti seconda in buona qualità , che l'utente ha caricato DotsWay 06 giugno 2017, condividi il link con amici e conoscenti, su youtube questo video è già stato visto 3,123 volte e gli è piaciuto 17 spettatori. Buona visione!