Introduction
In this article we are going to tell you regarding pipes in Angular 8 in detail and in next chapter I will show you how to create your own custom pipes in Angular 8 and use it in your application (so for further update follow our blog and by email also so that you could get email notification for new post
What is Pipe in Angular?
The “|” character is used to transform data
Syntax:
{{ This is My First Pipe | lowercase }}
The application accepts different data types like integers, strings, arrays, and dates as input, which are separated by '|'. It then converts them into the desired format and presents the result in the web browser.
Let us understand pipes with an example
Consider a scenario where we want to transform some text in lowercase when its displayed on the browser, so how we do that?
Open app.component.ts file and add below code (if its already exist then check the title)
import { Component } from '@angular/core';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
title = ‘GiksHub’;
}
As you can see above we Set title and on browser we want to display it in lowercase and upper case so for that modify your app.component.html file as below.
<b>{{title | uppercase}}</b><br/>
<b>{{title | lowercase}}</b>
Till here we are done now run the application and you will get output like this in browser.
Output:
Built-in Pipes In Angular 8
Below mentioned are some of the list of built-In pipes in angular 8
· Lowercasepipe
· Uppercasepipe
· Datepipe
· Currencypipe
· Jsonpipe
· Percentpipe
· Decimalpipe
· Slicepipe
1) Modify you app.component.ts file with below code.
import { Component } from '@angular/core';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
title = 'GiksHub';
todaydate = new Date();
jsonval = {name:'Rox', age:'25', address:{a1:'Mumbai', a2:'Karnataka'}};
months = ["Jan", "Feb", "Mar", "April", "May", "Jun",
"July", "Aug", "Sept", "Oct", "Nov", "Dec"];
}
<!--The content below is only a placeholder and can be replaced.-->
<div style = "width:100%;">
<div style = "width:40%;float:left;border:solid 1px black;">
<h1>Uppercase Pipe</h1>
<b>{{title | uppercase}}</b><br/>
<h1>Lowercase Pipe</h1>
<b>{{title | lowercase}}</b>
<h1>Currency Pipe</h1>
<b>{{6589.23 | currency:"USD"}}</b><br/>
<b>{{6589.23 | currency:"USD":true}}</b> //Boolean true is used to get the sign of the currency.
<h1>Date pipe</h1>
<b>{{todaydate | date:'d/M/y'}}</b><br/>
<b>{{todaydate | date:'shortTime'}}</b>
<h1>Decimal Pipe</h1>
<b>{{ 454.78787814 | number: '3.4-4' }}</b> // 3 is for main integer, 4 -4 are for integers to be displayed.
</div>
<div style = "width:40%;float:left;border:solid 1px black;">
<h1>Json Pipe</h1>
<b>{{ jsonval | json }}</b>
<h1>Percent Pipe</h1>
<b>{{00.54565 | percent}}</b>
<h1>Slice Pipe</h1>
<b>{{months | slice:2:6}}</b>
// The numbers "2" and "6" represent the starting and ending indices, respectively.
</div>
</div>
For Detail explanation of How to install Angular and Its Project Set Up Visit below link as its already explained there.
learn-angular-8-step-by-step-in-10-days
Conclusion:
In conclusion, this comprehensive guide on exploring Angular 8 Pipes with practical examples showcases their powerful capabilities in data manipulation. By mastering these powerful tools, you can enhance your web development projects and create more efficient and dynamic applications. Embrace the versatility of Angular 8 Pipes and elevate your coding skills to new heights. Happy coding!
