How to create custom pipe in Angular

How to create custom pipe in Angular

Source: How to create custom pipe in Angular

For more questions and answers visit our website at Frontend Interview Questions

To create a custom pipe in Angular, you can follow these steps:

1. Generate a new pipe: Use the Angular CLI to generate a new pipe using the ng generate pipe command. Open your terminal and navigate to your Angular project’s root directory, then run the following command:

ng generate pipe custom

This will create a new file custom.pipe.ts and add it to the appropriate directory in your project.

2. Implement the pipe:

Open the custom.pipe.ts file and implement your custom pipe logic within the transform method of the CustomPipe class. The transform method takes an input value and optional parameters, performs the desired transformation, and returns the result.

Here’s an example of a custom pipe that doubles a given number:

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

@Pipe({
  name: 'custom'
})
export class CustomPipe implements PipeTransform {
  transform(value: number): number {
    return value * 2;
  }
}

In this example, the transform method receives a number as input (value) and returns the result of doubling the input number (value * 2).

3. Register the pipe:

To use the custom pipe in your Angular application, you need to register it in the module where it will be used. Open the corresponding module file (e.g., app.module.ts) and import the CustomPipe class. Then, add the CustomPipe to the declarations array in the module’s decorator.

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';

import { AppComponent } from './app.component';
import { CustomPipe } from './custom.pipe';

@NgModule({
  declarations: [
    AppComponent,
    CustomPipe
  ],
  imports: [
    BrowserModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

4. Use the custom pipe:

Now that the custom pipe is registered, you can use it in your templates by referencing its name. For example, in your component’s template (app.component.html), you can use the custom pipe like this:

<h1>{{ 5 | custom }}</h1>

In this example, the custom pipe is applied to the value 5, and the transformed result (10) will be displayed in the <h1> element. That’s it! You have created a custom pipe in Angular. You can now use the pipe to perform custom transformations on data within your templates.