pipes in angular 4 -Part-2

What is it?

1.A pipe is to format the value of an expression displayed in the view.

2.The framework comes with multiple predefined pipes, such as date, currency, lowercase, uppercase, and others.

3.Syntax: {{expression | pipeName:inputParam1}}

4.If the pipe takes multiple inputs, they can be placed one after another separated by a colon

5.Example : {{fullName | slice:0:20}}

6.pipes is that they can be chained, wherein the output from one pipe can serve as the input to another pipe.

7.We can create custom pipes also.

Commonly used pipes

• date: As we just saw, the date filter is used to format the date in a specific manner.
• uppercase and lowercase: These two pipes, as the name suggests, change the case of the string input.
• decimal and percent: decimal and percent pipes are there to format decimal and percentage values based on the current browser locale.
• currency: This is used to format numeric values as a currency based on the current browser locale. {{14.22|currency:”USD” }} {{14.22|currency:”USD”:true}}
• json: This is a handy pipe for debugging that can transform any input into a string using JSON.stringify.

Currency Pipe

• This pipe is used for formatting currencies.
• Its first argument is an abbreviation of the currency type (e.g. “EUR”, “USD”, and so on).

{{ 4562.56 | currency:‘EUR’ }}

• we want the currency symbol to be printed out we pass as a second parameter the boolean true.

{{ 4562.56 | currency:‘EUR’ :true}}

Decimal pipe

• This pipe is used for transformation of decimal numbers.
• The first argument is a format string of the form “{minIntegerDigits}. {minFractionDigits}- {maxFractionDigits}“.

{{ 2.24159265 | number: ‘3.1-2’ }}

Output: 002.24

{{ 3.14159265 | number: ‘1.4-4’ }}

Output: 3.1416

Json Pipe

• This transforms a JavaScript object into a JSON string.

object: Object = { fname : ‘yogesh’, lname : ‘sharma’ };

<p>JSON Object : {{ object | json }}</p>

Output: JSON Object : { “fname”: “yogesh”, “lname”: “sharma” }

Percent Pipe

• Formats a number as a percent
• Percent can be passed a format string similar to the format passed to the DecimalPipe.

<p>{{ 0.123456 | percent }}</p>

<p>{{ 0.123456 | percent: ‘2.1-2’ }}</p>

Output: 12.346%

12.35%

Slice pipe

• returns a slice of an array.
• The first argument is the start index of the slice and the second argument is the end index.

<p>Slice : {{ [1,2,3,4,5,6] | slice:1:3 }}</p>

<p>{{ [1,2,3,4,5,6] | slice:2 }}</p>

<p>{{ [1,2,3,4,5,6] | slice:2:-1 }}</p>

Output: Slice : 2,3

3,4,5,6

3,4,5

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-pipeex',
  template: `
    <p>
      pipeex Works!
    </p>
    <p>Currency Pipe : {{ 123456 | currency:'EUR'}}</p>
    <p>Currency Pipe : {{ 123456 | currency:'EUR':true }}</p>
    <p>Currency Pipe : {{ 123456 | currency:'USD':true }}</p>
    <p>JSON Object : {{ object | json }}</p>
    <p>Upper Case : {{ 'pratap nagar' | uppercase}}</p>
    <p>Lower Case : {{ 'YOGESH SHARMA' | lowercase}}</p>
    <p>{{ 0.123456 | percent }}</p>
    <p>{{ 0.123456 | percent: '2.1-2' }}</p>
    <p>Slice : {{ [1,2,3,4,5,6] | slice:1:3 }}</p>
    <p>{{ [1,2,3,4,5,6] | slice:2 }}</p>
    <p>{{ [1,2,3,4,5,6] | slice:2:-1 }}</p>
  `,
  styles: []
})
export class PipeexComponent  {
  mydate = Date.now();
  object: Object = { fname : 'yogesh', lname : 'sharma' }; 
}

Output:

Angular 5 Online Training