Angular Pipe

Angular Pipe

In Angular, pipes are a valuable feature. They're a quick and easy way to change values in an Angular template. There are several pipes built-in, but you may also make your own. A pipe accepts one or more values and returns one or more values.

If you're new to Angular and the notion of Pipes, let's start by explaining what a Pipe is before moving on to a Custom Pipe.

  • Here are some of the most common problems with Angular's built-in Pipes:
  • a data pipeline (for parsing Date objects)
  • UpperCasePipe is a placeholder for UpperCasePipe, which (for uppercase-ing Strings)
  • LowerCasePipe is a placeholder for LowerCasePipe, which (for lowercase-ing Strings)
  • CurrencyPipe is an online currency exchange service (for formatting currencies)
  • AsyncPipe (used to unwrap asynchronous data like Observables!)

Pipes may be thought of in the same way as functions are in Angular. A process can accept parameters and return something new, and Pipes are entirely responsible for this! We could provide a valid Date and receive a String value that is neatly structured for the user interface. The term UI is essential since Pipes are generally used to convert data between our Model and View (the UI)!

That is what a Pipe is all about!

Example of an Angular Custom Filter Search Pipe

  • Generate Custom Pipe from an Angular Project.
  • Create a Search Pipe with a Custom Filter.
  • In AppModule, add a Search Filter.
  • Add dummy data and use a custom pipe to implement a filter search.
  • Angular Application Execution.

Pipe Example

Today is {{today}}

Today is {{today | date}}

Today is {{today | date:"dd/MM/yyyy"}}