Angular Pipes

Built-in Pipes

• number
• currency
• percent
• date
• uppercase
• lowercase
• titlecase
• json
• slice: selects items from an array or characters from a string. <tr *paFor="let item of getProducts() | slice:0:(itemCount ?? 1); let i = index; let odd = odd;>
• keyvalue: transforms an object or map into a series of key-value pairs
• i18nSelect: selects a text value to display for a set of values
• i18nPlural: selects a pluralized string for a value

Currency and Number Pipe

<!-- Format as US dollars  -->
{{item.price | currency:"USD":"symbol"}}

<!-- {{item.price | currency:"USD":"symbol":"2.2-2"}} -->

<!-- <minIntegerDigits>.<minFactionDigits>-<maxFractionDigits> -->
{{item.price | number:"3.2-2"}} e.g. 048.87

• minIntegerDigits: This value specifies the minimum number of digits. The default value is 1.
• minFractionDigits: This value specifies the minimum number of fractional digits. The default value is 0.
• maxFractionDigits: This value specifies the maximum number of fractional digits. The default value is 3.

number pipe is locale sensitive, so if using French, the above number will be 048,87

import {LOCALE_ID} from '@angular/core';
import localeFr from '@angular/common/locales/fr';
import {registerLocaleData} from '@angular/common';

registerLocaleData(localeFr);

@NgModule({
  providers: [{provide: LOCALE_ID, useValue: 'fr-FR'}],
})
export class AppModule {}

You can override the application’s locale setting by specifying a locale as a configuration option for the pipe, like this:

{{item.price | number:"3.2-2":"en-US"}} e.g. 048.87

Date Pipe

dateObject: Date = new Date(2020, 1, 20);
dateString: string = '2020-02-20T00:00:00.000Z';
dateNumber: number = 1582156800000;

<div>Date formatted from object: {{ dateObject | date }}</div>
<div>Date formatted from string: {{ dateString | date }}</div>
<div>Date formatted from number: {{ dateNumber | date }}</div>

<div>Date formatted from object: {{ dateObject | date:"shortDate" }}</div>
<div>Date formatted from string: {{ dateString | date:"mediumDate" }}</div>
<div>Date formatted from number: {{ dateNumber | date:"longDate" }}</div>

<div>Date formatted from object: {{ dateObject | date:"shortDate":"UTC":"fr-FR" }}</div>
<div>Date formatted from string: {{ dateString | date:"mediumDate":"UTC":"fr-FR" }}</div>
<div>Date formatted from number: {{ dateNumber | date:"longDate":"UTC":"fr-FR" }}</div>

i18nSelect Selecting Values 👏

The i18nSelect pipe selects a string based on a value, allowing context-sensitive values to be displayed to the user. The mapping between values and strings is defined as a simple map.

// component
selectMap = {Watersports: 'stay dry', Soccer: 'score goals', other: 'have fun'};

// in template
{{ item.category | i18nSelect:selectMap }}

i18nPlural Pluralizing Values

The i18nPlural pipe is used to select an expression that describes a numeric value.

numberMap = {
  '=1': 'one product',
  '=2': 'two products',
  other: '# products',
};

<div>There are {{ 1 | i18nPlural:numberMap }}</div>
<div>There are {{ 2 | i18nPlural:numberMap }}</div>
<div>There are {{ 100 | i18nPlural:numberMap }}</div>

In VMware, refer https://ngx.eng.vmware.com/@vmw/ngx-vip/plural-format/documentation

Custom Pipes

Add tax Pipe:

import {Pipe} from '@angular/core';

@Pipe({name: 'addTax'})
export class PaAddTaxPipe {
  defaultRate: number = 10;

  transform(value: any, rate?: any): number {
    let valueNumber = Number.parseFloat(value);
    let rateNumber = rate == undefined ? this.defaultRate : Number.parseInt(rate);
    return valueNumber + valueNumber * (rateNumber / 100);
  }
}

<select class="form-select" [value]="taxRate || 0" (change)="taxRate=$any($event).target.value">
  <option value="0">None</option>
  <option value="10">10%</option>
  <option value="20">20%</option>
  <option value="50">50%</option>
</select>
<div>{{ item.price | addTax:(taxRate || 0) }}</div>

Combine Pipes

{{ item.price | addTax:(taxRate || 0) | currency:"USD":"symbol" }}

Creating Impure Pipes

@Pipe({
  name: 'filter',
+  pure: false,
})
export class PaCategoryFilterPipe {
  transform(products: Product[] | undefined, category: string | undefined): Product[] {
    if (products == undefined) {
      return [];
    }
    return category == undefined ? products : products.filter((p) => p.category == category);
  }
}

Inject Service in impure pipe

import {Injectable} from '@angular/core';
@Injectable()
export class DiscountService {
  private discountValue: number = 10;
  public get discount(): number {
    return this.discountValue;
  }

  public set discount(newValue: number) {
    this.discountValue = newValue || 0;
  }

  public applyDiscount(price: number) {
    return Math.max(price - this.discountValue, 5);
  }
}

import {Pipe} from '@angular/core';
import {DiscountService} from './discount.service';

@Pipe({name: 'discount', pure: false})
export class PaDiscountPipe {
  constructor(private discount: DiscountService) {}

  transform(price: number): number {
    return this.discount.applyDiscount(price);
  }
}

this feature should be used with caution because it means that the transform method will be called after every change in the application, not just when the service is changed.