Angular custom pipes – remove white spaces

Pipes

A pipe transform the input stream into a desirable format. In Angular pipes are helpful to format the Strings, Date and Numbers into presentable or desired format. Angular comes with many builtin pipes. To use the pipes we will add pipe operator ( | ) inside the interpolation expression. The below example shows how to use the uppercase pipe operator for a string value, it will display the first name into uppercase.

{{FirstName | uppercase}}

There are many built in Pipe operators in Angular, you can find the detail about Pipes in angular documentations.

Custom Pipes

If the builtin or predefined pipes are not full filling your requirement we can define our own pipes. These are called custom pipes.

Lets create a simple custom pipe which will remove white spaces between two words. Create a new angular project with angular CLI ng new custompipe . This will create a new project. Now to create a new custom pipe run the following angular CLI command on terminal window ng g p custompipe/removewhitespaces . This command will create a custom pipe files in custompipe folder. It’s a good practice to keep related files in a folder instead of keeping everything in app folder. This will increase readability of a project. If you open the removewhitespaces.ts file under the custom pipe folder it will look like this,

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

@Pipe({
  name: 'removewhitespaces'
})
export class RemovewhitespacesPipe implements PipeTransform {

  transform(value: any, args?: any): any {
    return null;
  }

}

As you can see the pipe class has @Pipe decorator which define the name of the pipe. Custom pipe class implements the PipeTransform interface. And then there is a transform method. It accepts the input value, and then optional parameter and then the return type.




I am going to create a simple custom pipe which will accept string as input and remove the white spaces and return the string value back. I modify the file with the following code,

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

@Pipe({
  name: 'removewhitespaces'
})
export class RemovewhitespacesPipe implements PipeTransform {

  transform(value: string, args?: any): string {
    return value.replace(/ /g, '');
  }

}

As you can see I set the datatype of input parameter as string and return type also  set as string. Transform method will return the input value after removing the white spaces. Before using the pipe in our code. I want to show you that there is an entry in the app.module class. Because we create the pipe using angular CLI so CLI manage it owns. Below is the app module class

import { RemovewhitespacesPipe } from './custompipes/removewhitespaces.pipe';

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

Next on our page app component page I set the value of title variable to ‘This is custom pipe’. Now on the html page I added the below code to use our custom pipe.

<div>
  <p>{{title | removewhitespaces}}</p>
</div>

The output on the browser will be ‘Thisiscustompipe’.  I uploaded the sample code on Github. You can download it from the following location https://github.com/waqas80/custompipes.

Leave a Reply

Latest Posts

Categories