Web
Analytics
custom pipe in angular 4 - Tutorial

For Consultation : +91 9887575540

Stay Connected :

What is Custom pipe and how to create custom pipe in angular 4

  1. we have inbuilt pipes like lowercase, uppercase, slice, date etc which have their own functionality but if we want to create our custom login of filtering then we need to create custom filters.
  2. It has the @Pipe decorator with pipe metadata that has a name property.
  3. This value will be used to call this pipe in template expressions.
  4. It must be a valid JavaScript identifier.implement the PipeTransform interface’s transform method.
  5. This method takes the value being piped and a variable number of arguments of any type and return a
    transformed (“piped”) value.
  6. Custom pipe means is to generate hard-coded user-defined filter.





Example of angular 4 custom filter.

Step 1: First create custom pipe type script file in integrated terminal of visual studio code. Write following command

 ng g pipe mypipe –flat

Step 2: Write following code into mypipe.pipe.ts

Step 3: Ensure that newly create pipe.ts reference has been added into app.module.ts.

Step 4: Please write following code into your own component(here is app.component.ts)




 

Step 5: Run your code using following command

ng serve –open

Output

Angular 5 Online Training

Angular 5 Online Training






Select your currency