Angular : Transforming Data Using Custom Pipe

In Angular, pipes are essential for transforming data in templates. Custom pipes enable you to create personalized logic for data transformation. Let's go through an example of how to create a custom Angular pipe that converts a string to uppercase and adds an exclamation mark at the end.

Step 1: Create a new TypeScript file for the custom pipe:

//'uppercase-exclamation.pipe.ts'
import { Pipe, PipeTransform } from '@angular/core';

@Pipe({ name: 'uppercaseExclamation' })
export class UppercaseExclamationPipe implements PipeTransform {
  transform(value: string): string {
    if (!value) {
      return value;
    }
    return value.toUpperCase() + '!';
  }
}

Step 2: Declare and add the custom pipe to your module:

// 'app.module.ts'
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import { UppercaseExclamationPipe } from './uppercase-exclamation.pipe'; // Import the custom pipe here

@NgModule({
  declarations: [
    AppComponent,
    UppercaseExclamationPipe, // Declare the custom pipe here
  ],
  imports: [BrowserModule],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

Step 3: Now, you can use the 'uppercaseExclamation' pipe in your templates:

<h1>{{ 'hello, world' | uppercaseExclamation }}</h1>

In this example, the 'uppercaseExclamation' pipe takes the string "hello, world" and transforms it to "HELLO, WORLD!" by converting the text to uppercase using the 'toUpperCase()' method and adding an exclamation mark at the end.

Don't forget to import and include the necessary files in your project for this example to work correctly.

Congratulations! You've successfully created a custom Angular pipe and used it in your template to achieve the desired data transformation. Custom pipes are powerful and flexible, providing a convenient way to apply various transformations to your data with ease.

Happy coding!! 😊