Ticker

6/recent/ticker-posts

Angular Pipe

 


Angular Pipe


Use pipes to transform integers, strings, arrays, and date as input separated with | to be converted in the format as required and display the same in the browser.

A simple pipe is used to process and return the data as needed

// app.component.ts
import { Component } from '@angular/core';
@Component({ 
   selector: 'app-root', 
   templateUrl: './app.component.html', 
   styleUrls: ['./app.component.css'] 
}) 
export class AppComponent {
   title = 'Angular'; 
}


// app.component.html 
<p>{{title | uppercase}}</p><br/> 
<p>{{title | lowercase}}</p>

Angular provides some built-in pipes  
  1. Lowercasepipe: Transforms text to all lower case.
  2. Uppercasepipe: Transforms text to all upper case.
  3. Datepipe: Formats a date value according to locale rules.
  4. Currencypipe: Transforms a number to a currency string, formatted according to locale rules.
  5. Jsonpipe: converts a value or object into JSON formatted string.
  6. Percentpipe: Transforms a number to a percentage string, formatted according to locale rules.
  7. Decimalpipe: Transforms a number into a string with a decimal point, formatted according to locale rules.
  8. Slicepipe: Slice pipe slices a given array or string into subsets. We need to provide start and end index. 
You have seen the lowercasepipe and uppercasepipe models. Presently, we should take a few guides to perceive how different lines work.

// component.ts
import { Component } from '@angular/core';  
@Component({  
  selector: 'app-root',  
  templateUrl: './app.component.html',  
  styleUrls: ['./app.component.css']  
})  
export class AppComponent {  
  title = 'Angular pipe';  
  todaydate = new Date();  
  jsonval = {name: 'Pipe', age: '25', address:{a1: 'Angular Pipe', a2: 'Angular Pipe'}};  
  months = ['Jan', 'Feb', 'Mar', 'April', 'May', 'Jun',  
    'July', 'Aug', 'Sept', 'Oct', 'Nov', 'Dec'];  
}  

// component.html

<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.  
 
<h1>Json Pipe</h1>  
<b>{{ jsonval | json }}</b>  
<h1>Percent Pipe</h1>  
<b>{{00.54565 | percent}}</b>  
<h1>Slice Pipe</h1>  
<b>{{months | slice:3:5}}</b>  
// here 3 and 5 refers to the start and the end index