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:
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:
.png)
Lowercase pipeUppercase
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:
.png)
uppercaseJSONpipe
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:
.png)
json pipeDatepipe
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:
.png)
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:
.png)
currency pipePercentpipe
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:
.png)
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:
.png)
slice pipeDecimalpipe
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:
.png)
decimal pipe
Similar Reads
Pipes in Angular Pipes are often used for formatting dates, numbers, and Strings and they can be customized to suit various needs. In this article, we explain about how to use pipes in Angular with examples and related outputs for your reference.Prerequisites:To understand this article you should have knowledge of t
8 min read
What is pipe() function in Angular ? Angular stands out as a liked JavaScript framework for developing web applications. In Angular, the pipe() function plays a vital role in transforming data within templates. It allows you to apply various transformations to data before displaying it in the view. In this article, we will explore more
4 min read
Updates in Angular 12 Angular 12 is the latest version of the popular front-end web development framework. Angular released in May 2021 comes with several new features and improvements that enhance the performance, productivity, and stability of the framework. In this article, we will see different key features and impro
5 min read
Updates in Angular 11 Angular 11 is released and it has some great features, so let's check them out: Fonts Download Automatically: Angular import font by default. During integration, Angular CLI will download in-line fonts and connect the appliance. Angular automatically provides this with version 11. You simply got to
2 min read
Custom Element in Angular 17 In web development, creating reusable UI components is important for building scalable applications. Angular, a powerful front-end framework, offers to create custom elements. In this article, we'll explore more about the custom components and their uses. Prerequisite:NPM or NodejsAngular CLIAngular
4 min read