How to Use an Angular Pipe in a Component File
By: Mwiza Kumwenda
Tags: Angular, JavaScript, Software Development, Front End Development, Programming

How to Use an Angular Pipe in a Component File

You do not always have to use an Angular pipe in the template

Photo by Crystal Kwok on Unsplash

In this post I will show you how you can use Angular pipes within the Component code. Often, we use pipes within the template, however, pipes are just classes with some logic and can therefore be used in the typescript code too.

To illustrate the use of Angular pipes within a component I will use the TitleCasePipe. But the principles I outline should apply and work for any other pipes.

The TitleCasePipe basically transforms a string by capitalizing all first letters of the words in the string and makes the rest lowercase. For example, applying the pipe to the word joe biden should give you the result of Joe Biden.

Create an Angular application

For practicality, we can create an Angular application to see our pipe transformation in action.

Create a simple Angular application via the Angular CLI by running the following command.

ng new pipe-in-component --defaults

Using the pipe in a component

Now that we have a basic Angular application. We can use the pipe transformation within a component in the following three main steps.

1. Register the pipe in the module

First register the pipe you want to use as a provider in the main module file, in this case, it will be the app.module.ts file as highlighted in bold below. Also, remember to import the pipe from its source.

Note: built-in Angular pipe can be imported from the @angular/common library.

import { TitleCasePipe } from '@angular/common'; @NgModule({ declarations: [AppComponent],

imports: [BrowserModule ],

providers: [TitleCasePipe], bootstrap: [AppComponent]

}) export class AppModule { }

2. Inject the pipe in the component

The next step is to Inject the pipe in the component that we want it to be used in. We do the dependency injection in the components’ constructor. Remembering to import the pipe from its source.

3. Call the pipes’ transform method

Finally, you can call the injected pipes’ transform method, passing in the required parameters that you want to transform. For this example, we will call it in the ngOnInit method and pass it the string to transform.

The entire code for the app.component.ts file will look as below. The bold text is the changes I have made.

app.component.ts

import { Component, OnInit} from '@angular/core';

import { TitleCasePipe } from '@angular/common'; @Component({

selector: 'app-root',

templateUrl: './app.component.html',

styleUrls: ['./app.component.css']

}) export class AppComponent implements OnInit {

title = 'pipe-in-component';

fullname = '' constructor(private titleCasePipe: TitleCasePipe) { } ngOnInit(): void {

this.fullname = this.titleCasePipe.transform('keVin carTor') } }

Clear all the code in the app.component.html template file and paste in the code below to display the formatted string in the template.

app.component.html

<h5>Fullname</h5> {{fullname}}

Finally, you can serve the application using the following command and you should have an output similar to the one below.