Built-In Pipes in Angular.

What are Pipes in Angular?

• Pipes are transform string, currency amounts, dates, and other data for display.
• It is accept the input value and returns a transformed value.
• Pipes are useful throughout your application.
• To apply a pipe, use the pipe operator(|) within your template expression.

Angular Built-In pipes.

1. Lowercase pipe
2. Uppercase pipe
3. Titlecase pipe
4. Json pipe
5. Percent pipe
6. Decimal pipe
7. Currency pipe
8. Date pipe
9. Slice pipe

1. Lowercase pipe:

• Transform Text to all Lowercase.

Syntax:

{{ value-expression | lowercase }}

Write the following code in app.component.ts

title = 'TheCodeHubs';

Write the following code in app.component.html

<div>{{title | lowercase}}</div>   //output: thecodehubs

2. Uppercase pipe:

•  Transform Text to all UpperCase.

Syntax:

{{ value-expression | uppercase }}

Write the following code in app.component.ts

title = 'TheCodeHubs';

Write the following code in app.component.html

<div>{{title | uppercase}}</div>     //output: THECODEHUBS

3. Titlecase pipe:

• Transform Text to all TitleCase.
• Capitalizes the first letter of each word and transforms the rest of the word in lowercase.
• Words are delimited by any space, tab, Whitespace, and line-feed character. [Commas, Pipes, hyphens, etc are not considered as delimited].

Syntax:

{{ value-expression | titlecase }}

Write the following code in app.component.html

<div>{{'angular titlecase' | titlecase}}</div> //output: Angular Titlecase
<div>{{'anGuLar tITLEcASE' | titlecase}}</div> //output: Angular Titlecase
<div>{{'angular,titlecase' | titlecase}}</div> //output: Angular,titlecase
<div>{{'angular|titlecase' | titlecase}}</div> //output: Angular|titlecase
<div>{{'angular-titlecase' | titlecase}}</div> //output: Angular-titlecase

4. Json pipe

• Angular Jsonpipe is a part of  “@angular/common”.
• If it is not imported that’s thought This type of error.[no pipe found with JSON error]
• Usually, we will get data from the server in JSON format & it is bind into HTML.[ This JSON type exact data in browser network tab in developer tools] it is helpful while debugging data issues in JSON.
• Jsonpipe is an angular pipe.
• Angular Jsonpipe converts value or object into JSON formatted string.
• it uses JSON.stringify to convert into a JSON string.
• JSON is a subset of javascript.
• Jsonpipe uses JSON keywords to convert the value into a JSON string.

Syntax:

{{ value-expression | json }}

Write the following code in app.component.ts

export class AppComponent
{
   customer!:customer;
   constructor()
   {
      this.customer = {Id:1,Name:'abc'}
   }
}

export class customer
{
   Id!: number;
   Name!: string;
}

Write the following code in app.component.html [Object without Jsonpipe]

{{customer}} //output: [object Object]

Write the following code in app.component.html [Object with Jsonpipe]

{{customer | json}} //output:{"Id":1,"Name":"abc"}

Write the following code in app.component.ts [Using Jsonpipe with an array of Object]

export class AppComponent
{
   customer!:customer;
   ArrayObj!: customer[];
   constructor()
   {
     this.customer = {Id:1,Name:'abc'}
     this.ArrayObj = [ { Id:1, Name:'xyz' }, { Id:2, Name:'pqr' } ];
   }
}

export class customer
{
   Id!: number;
   Name!: string;
}

Write the following code in app.component.html

{{customer | json}}
{{ArrayObj | json}}
//output:{"Id":1,"Name":"abc"}[{"Id":1,"Name":"xyz"},{"Id":2,"Name":"pqr"}]

5. percentage pipe

• Transforms a number to a percentage string.
• formatted according to local rules that determine group sizing, separator, decimal-point character.

Syntax:

{{ value-expression | percent [ : digitsInfo [ : locales ] ] }}

Write the following code in app.component.ts

export class AppComponent
{
   num1: number = 2.5;
   num2: number = 0.5;
   constructor(){}
}

Write the following code in app.component.html

<div>{{num1 | percent}}</div><br>                //output: 250%
<div>{{num1 | percent:'2.2-5'}}</div><br>        //output: 250.00%
<div>{{num2 | percent:'1.2-5'}}</div><br>        //output: 50.00%
<div>{{num1 * num2 | percent:'1.2-3'}}</div><br> //output: 125.00%

6. Decimal pipe

• Decimalpipe is used to formate numbers as decimal numbers according to local rules.
• It used the number keyword with pipe operator.

Syntax:

{{ value-expression | number [ : digitsInfo [ : locales ] ] }}

Write the following code in app.component.ts

export class AppComponent
{
   num3: number = 12.638467846;
   num4: number = 0.5;
   constructor(){ }
}

Write the following code in app.component.html

<div>{{num3 | number}}</div><br>                  //output: 12.638
<div>{{num3 | number:'3.2-5'}}</div><br>          //output: 012.63847
<div>{{num4 | number:'3.2-5'}}</div><br>          //output: 000.50
<div>{{num3 * num4 | number:'1.3-6'}}</div><br>   //output: 6.319234

7. Currency pipe

• Currencypipe uses currency keyword with pipe operator to formate a number into currency formate.

{{ value_expression | currency [ : currencyCode [ : display [ : digitsInfo [ : locale ] ] ] ] }}

export class AppComponent
{
    currency1: number = 0.25;
    currency2: number = 10.263782;
    constructor(){}
}

<div>{{currency1 | currency:'INR':false}}</div><br>            //output: INR0.25
<div>{{currency2 | currency:'INR':false:'1.2-4'}}</div><br>    //output: INR10.2638
<div>{{currency1 | currency}}</div><br>                        //output: $0.25                          
<div>{{currency2 | currency:'USD':true:'2.2-4'}}</div>         //output: $10.2638

8. Date pipe

• Formate date according to that local rules.

Syntax:

{{ value_expression | date [ : format [ : timezone [ : locale ] ] ] }}

Write the following code in app.component.ts

newDate: number = Date.now();

Write the following code in app.component.html

<div>{{newDate | date}}</div><br>                            //output: Nov 13, 2021                          
<div>{{newDate | date:'medium'}}</div><br>                   //output: Nov 13, 2021, 4:31:58 PM                          
<div>{{newDate | date:'shortTime'}}</div><br>                //output: 4:34 PM                          
<div>{{newDate | date:'mm:ss'}}</div><br>                    //output: 34:16                          
<div>{{newDate | date:'fullDate'}}</div><br>                 //output: Saturday, November 13, 2021                          
<div>{{newDate | date:'h:mm a z'}}</div><br>                 //output: 4:42 PM GMT+5                          
<div>{{newDate | date:'short'}}</div><br>                    //output: 11/13/21, 4:42 PM                          
<div>{{newDate | date:'long'}}</div><br>                     //output: November 13, 2021 at 4:42:07 PM GMT+5                          
<div>{{newDate | date:'full'}}</div><br>                     //output: Saturday, November 13, 2021 at 4:42:07 PM GMT+05:30                          
<div>{{newDate | date:'shortDate'}}</div><br>                //output: 11/13/21                          
<div>{{newDate | date:'mediumDate'}}</div><br>               //output: Nov 13, 2021                          
<div>{{newDate | date:'longDate'}}</div><br>                 //output: November 13, 2021                          
<div>{{newDate | date:'mediumTime'}}</div><br>               //output: 4:42:07 PM                          
<div>{{newDate | date:'longTime'}}</div><br>                 //output: 4:42:07 PM GMT+5                          
<div>{{newDate | date:'fullTime'}}</div><br>                 //output: 4:42:07 PM GMT+05:30

9. slice pipe

• Create a new Array or string containing subset[slice] if element.

{{ value_expression | slice : start [ : end ] }}

str: string = 'TheCodehubs';

<div>{{str | slice:0:4}}</div><br>             //output: TheC
<div>{{str | slice:4:0}}</div><br>             //output:
<div>{{str | slice:-4}}</div><br>              //output: hubs
<div>{{str | slice:-4:-2}}</div><br>           //output: hu
<div>{{str | slice:-100}}</div><br>            //output: TheCodehubs
<div>{{str | slice:100}}</div><br>             //output: