Built-in Pipes in Angular 17

Last Updated : 25 Jun, 2024

In theory, pipes are just basic functions that take an input value, process it, and output an altered result. Numerous built-in pipelines are supported by Angular. You can, however, also make custom pipes to meet your needs. Among the noteworthy characteristics are: define pipes with the pipe "|" symbol.

There are several methods to integrate built-in pipes in Angular 17 which are as follows:

Table of Content

LowerCase
Uppercase
JSONpipe
Datepipe
Currencypipe
Percentpipe
Slicepipe
Decimalpipe

Steps to create pipes

Step 1: create an angular project

ng new <YOUR_PROJECT_NAME>

Folder Structure:
Folder Strucutre

Syntax:

{{title | uppercase}}

Step 2: app.component.ts in app module

JavaScript

import { Component } from '@angular/core';
import { RouterOutlet } from '@angular/router';
import { CommonModule } from '@angular/common';

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [RouterOutlet,CommonModule],
  templateUrl: './app.component.html',
  styleUrl: './app.component.css'
})
export class AppComponent {
  title = 'pipe';
}

LowerCase

Example: To demonstrate creating the built-in LowerCase pipe in Angular 17.

JavaScript

<!--app.component.html-->
<h1>Lowercase Pipe</h1>  
<b>{{title | lowercase}}</b><br/>  
<b>{{"HELLO GEEKS"| lowercase}}</b><br/>

Output:

Uppercase

Example: To demonstrate creating the built-in UpperCase pipe in Angular 17.

JavaScript

<!--app.component.html-->
<h1>Uppercase Pipe</h1>  
<b>{{title | uppercase}}</b><br/>  
<b>{{"Hello Geeks"| uppercase}}</b><br/>

Output:

JSONpipe

app.component.ts in add json data

JavaScript

import { Component } from '@angular/core';
import { RouterOutlet } from '@angular/router';
import { CommonModule } from '@angular/common';

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [RouterOutlet,CommonModule],
  templateUrl: './app.component.html',
  styleUrl: './app.component.css'
})
export class AppComponent {
  title = 'pipe';
  mydata = {name: 'geek', age: '25', address:{a1: 'Paris', a2: 'France'}};  
}

Example: To demonstrate creating the built-in JSON pipe in Angular 17.

HTML

<!--app.component.html-->
<h1>Json Pipe</h1>
<b>{{mydata | json}}</b>

Output:

Datepipe

Example: To demonstrate creating datepipe.

JavaScript

//app.component.ts
import { Component } from '@angular/core';
import { RouterOutlet } from '@angular/router';
import { CommonModule } from '@angular/common';

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [RouterOutlet,CommonModule],
  templateUrl: './app.component.html',
  styleUrl: './app.component.css'
})
export class AppComponent {
  title = 'pipe';
  todaydate = new Date();  
 
}

Example: To demonstrate creating the built-in Data pipe in Angular 17.

HTML

<!--app.component.html-->
<h1>Date pipe</h1>
<b>{{todaydate | date:'d/M/y'}}</b><br />
<b>{{todaydate | date:'shortTime'}}</b>

Output:

Currencypipe

Example: To demonstrate creating the built-in Currency pipe in Angular 17.

HTML

<!--app.component.html-->
<h1>currency Pipe</h1>
<h3>{{1220 | currency :'INR'}}</h3>
<h3>{{12200| currency :'USD'}}</h3>
<h3>{{12200| currency :'GBP'}}</h3>

Output:

Percentpipe

Example: To demonstrate creating the built-in Percent pipe in Angular 17.

HTML

<!--app.component.html-->
<h1>Percent Pipe</h1>  
<b>{{00.84565 | percent}}</b>

Output:

Slicepipe

JavaScript

// app.component.ts
JavaScriptimport { Component } from '@angular/core';
import { RouterOutlet } from '@angular/router';
import { CommonModule } from '@angular/common';

@Component({
    selector: 'app-root',
    standalone: true,
    imports: [RouterOutlet, CommonModule],
    templateUrl: './app.component.html',
    styleUrl: './app.component.css'
})
export class AppComponent {
    title = 'pipe';
    months = ['Jan', 'Feb', 'Mar', 'April', 'May', 'Jun',
        'July', 'Aug', 'Sept', 'Oct', 'Nov', 'Dec'];

}

Example: To demonstrate creating the built-in Slice pipe in Angular 17.

HTML

<!--app.component.html-->
<h1>Slice Pipe</h1>  
<b>{{months | slice:3:9}}</b>

Output:

Decimalpipe

Example: To demonstrate creating the built-in Decimal pipe in Angular 17.

HTML

<!--app.component.html-->
<h1>Decimal Pipe</h1>  
<b>{{ 454.78787814 | number: '3.4-4' }}</b>

Output:

How To Use PrimeNG Icon In Angular 17?

jncbhudiya

Improve

Article Tags :

Built-in Pipes in Angular 17

Steps to create pipes

Folder Structure:Folder Strucutre

Syntax:

LowerCase

Uppercase

JSONpipe

Datepipe

Currencypipe

Percentpipe

Slicepipe

Decimalpipe

Similar Reads

Thank You!

What kind of Experience do you want to share?

Folder Structure:
Folder Strucutre