Pipes In Angular 6

In this article, we are going to learn about Pipes in Angular 6.

Introduction

Pipes are used to format the data before displaying in the View. Pipe is used by using |. This symbol is called a Pipe Operator.

Types of pre-defined or built-in pipes in Angular 6.

Lowercase
Uppercase
Titlecase
Slice
Json Pipe
Number Pipe
Percent Pipe
Currency Pipe
Date Pipe

Let's understand more about pipes in detail by using an example. Create a project using CLI.

ng new AngularPipes

Open this project using the below command.

Code .

Step 1

Open app.component.ts.

Lowercase

Syntax - Text|lowercase

Uppercase

Syntax - Text|uppercase

Code Snippets

App.component.ts

import {
Component
} from '@angular/core';
@Component({
selector: 'app-root',
template: `
<h2>{{name|lowercase}}</h2>
<h2>{{name|uppercase}}</h2>
`,
})
export class AppComponent {
name = 'Angular Pipes';
}

Titlecase

Titlecase converts the first letter of a word in the uppercase.

Syntax - name|titlecase

Code Snippets

import {
Component
} from '@angular/core';
@Component({
selector: 'app-root',
template: `
<h2>{{name|titlecase}}</h2>
`,
})
export class AppComponent {
name = 'Welcome to angular pipes project';
}

Slice

Syntax - Text|slice:3

Code snippets

import {
Component
} from '@angular/core';
@Component({
selector: 'app-root',
template: `
<h2>{{name|slice:3}}</h2>
`,
})
export class AppComponent {
name = 'AngularPipes';
}

JSON Pipe

Syntax -Text|json

Code snippets

import {
Component
} from '@angular/core';
@Component({
selector: 'app-root',
template: `
<h2>{{cities|json}}</h2>
`,
})
export class AppComponent {
name = 'AngularPipes';
public cities = {
"city": "Jaipur",
"country": "India"
}
}

Number

Syntax - value | number:'1.2.2'

Currency Pipe

Syntax - value||currency

By default, the currency is USD but we can change it by specifying the country name.

By passing the country as an argument, we get the following.

Syntax - value||currency:'GBP'

Code snippets

import {
Component
} from '@angular/core';
@Component({
selector: 'app-root',
template: `
<h2>{{8.7844|number:'1.2-2'}}</h2>
<h2>{{0.23|percent}}</h2>
<h2>{{0.23|currency}}</h2>
<h2>{{0.23|currency:'GBP'}}</h2>
`,
})
export class AppComponent {
name = 'AngularPipes';
}

Date Pipes

Code snippets

import {
Component
} from '@angular/core';
@Component({
selector: 'app-root',
template: `
<h2>{{date}}</h2>
<h2>{{date|date:'short'}}</h2>
<h2>{{date|date:'shortdate'}}</h2>
`,
})
export class AppComponent {
name = 'AngularPipes';
}

Summary

In this article, we learned about Pipes and types of Pipes in Angular. Pipes are a useful feature in Angular and are used to format the data before displaying in the View.