What is an angular pipe? How angular 13 works in the latest

What is an angular pipe?

Pipes are simple functions to use in template expressions to accept an input value and return a transformed value.

What is an angular pipe How angular 13 works in the latest

A pipe takes in data as input and transforms it into an output. The pipe’s purpose is to allow the transformation of an existing value and reusability!

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.

15 Useful Chrome Extension for Blogger

No 1 Google Search Console is a free tool

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

What is an angular pipe How angular 13 works in the latest
// 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.

DownloadHub 2021 Dual Audio Bollywood Movies Download

LiteSpot Blogger Template Premium Version Download for Free

// 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'];  
}
What is an angular pipe How angular 13 works in the latest
// 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