What Is Pipe? Why use Pipes?

What Is Pipe?
Pipes transform displayed values within a template.

Use the @Pipe annotation to declare that a given class is a pipe. A pipe class must also implement a PipeTransform interface.

The @Pipe decorator allows you to define the pipe name that is globally available for use in any template in the across Angular apps.

Pipe class implements the “PipeTransform” interfaces transform method that accepts an input value and returns the transformed result.

There will be one additional argument to the transform method for each parameter passed to the pipe.

The CLI commons for generate Pipe -
ng g pipe PipeName
ng generate pipe PipeName

Pipe decorator and metadata –
  name: string
  pure?: boolean

The pipe name is used for template bindings.
To use the pipe you must set a reference to this pipe class in the module.

Why use Pipes?
Sometimes, the data is not displayed in the well format on the HTML templates that times were using pipes.

You also can execute a function in the HTML template to get its returned value.

For example - If you want to display a credit card number on your web apps - you can't display the whole number on your web app - you should write a custom logic to display card number as like ****-****-2485 using your custom pipe.

For more detail kindly refer the -


Anil Singh is an author, tech blogger, and software programmer. Book writing, tech blogging is something do extra and Anil love doing it. For more detail, kindly refer to this link..

My Tech Blog - https://www.code-sample.com/
My Books - Book 1 and Book 2

What Is Pipe? Why use Pipes? What Is Pipe? Why use Pipes? Reviewed by Anil Singh on 2:48 AM Rating: (5)
www.code-sample.com/. Powered by Blogger.