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

//OR

ng generate pipe PipeName

Pipe decorator and metadata –

@Pipe({

  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 -

https://www.code-sample.com/2018/05/angular-5-6-7-pipes-decorator.html