Pipes In Angular

Hi Friends, This is Lakshman here.

As part of the Series “Angular Best Practices”.

Today, We will Pipes in Angular.

Pre-requisites:

The pre-requisites are

• Node.JS - Click Here
• Angular CLI - Click Here
• VS Code - Click Here

Pipes

It is a feature used to transform data and display it on UI.

We can categorise with two options as below,

• Pre-defined Pipes.
• Custom Pipes.

In Pipe, it needs to create with Model of it uses only to that Module else add to Shared Module to access it.

Some Pre-defined Pipes are

• Datapipe
• PercentagePipe
• Decimal Pipe, etc.,

In regards to Custom Pipes, we create and use them.

For example, To Create it,

    import { Pipe, PipeTransform } from '@angular/core';

    @Pipe({
    name: 'status'
    })
    export class StatusPipe implements PipeTransform {

    transform(value: unknown, ...args: unknown[]): unknown {
        return value ? "Completed" : "Yet To Complete";
    }

    }

to Use it,

<td>{{ item.IsCompleted | status }}</td>

That wraps up the Pipes in Angular

You may also access to source code on GitHub by Click Here

On-road head, we will discuss a lot of things.

Looking forward to your comments and sharing your feedback.

Until that, I am Lakshman, Signing Off.