Angular Pipes

In the previous articles, you’ve learned about every different type of directive in Angular. In this article, you’ll be learning about pipes in Angular, and it’s working.

What is Angular Pipe?

Pipes allow us to transform data before displaying it into the View according to our needs. For example, we can transform string, currency, amounts, dates, and other data using pipes.

Types of Pipes in Angular

Let’s see some built-in pipes in Angular:

  • DatePipe
  • UpperCasePipe
  • LowerCasePipe
  • PercentPipe
  • SlicePipe
  • CurrencyPipe etc.

The symbol of the pipe operator is “|.”

Let’s see each of them separately with the syntax:

Date Pipe

DatePipe is used to transform data to its local value.

Syntax

<h1>Today's date is : {{today | date}}</h1>

The “today” property we created in the ts file and assigned with today’s date.

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

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})

export class AppComponent {
  title = 'my-app';
  today = Date.now()
}

Output:

angular date pipe example

UpperCase Pipe

UpperCasePipe is used to transform the alphabets of a text to its uppercase.

Syntax

<h1>{{text | uppercase}}</h1>

The “text” is the property that we defined in the component.ts file with value welcome to errorsea assigned with it.

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

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'my-app';
  text = "welcome to errorsea"
}

Output:

angular uppercase pipe example

LowerCase Pipe

LowerCasePipe is used to transform the alphabets of a text to its lowercase.

Syntax

<h1>{{text | lowercase}}</h1>

The “text” is the property that we defined in the component.ts file with the value WELCOME TO ERRORSEA assigned with it.

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

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})

export class AppComponent {
  title = 'my-app';
  text = "WELCOME TO ERRORSEA"
}

Output:

angular lowercase pipe example

Percent Pipe

Suppose we have marks of a student and total marks, and we want to display the percentage of his marks; we can achieve that using PrecentPipe.

Syntax

<h1>Marks Obtained : {{marks/total | percent}}</h1>

The “marks” and “total” are the two properties we created in the ts file and assigned them with some values.

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

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})

export class AppComponent {
  title = 'my-app';
  marks = 300
  total = 500
}

Output:

angular percentage pipe example

Slice Pipe

Splice is used to display the required substring into the View.

Syntax

<h1>{{text| slice:5:8}}</h1>
  • LowerBoundIndex = 5
  • UpperBoundIndex = 8(8th index in not included)

Output:

angular slice pipe example

Currency Pipe

Sometimes to display the price of any product, we use a currencyPipe.

Syntax

<h1>{{price| currency:'INR'}}</h1>

The price is the property that we defined in the ts file and assigned with some value.

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

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})

export class AppComponent {
  title = 'my-app';
  price=2.25
}

We used INR, which is the currency code of India. But, of course, we can use some other currency code as well.

Output:

angular currency pipe example

NOTE: The default currency code of currencypipe is US Dollar.

Conclusion

In this article, we’ve seen pipes in angular, and it’s working. We’ve also seen some commonly used pipes and their working. We’ve almost covered all the basic topics of Angular. After a few articles, we’ll be good to go on the next modules of Angular.

Read Next: Angular Routes

Leave a Reply

Your email address will not be published. Required fields are marked *