Angular Pipes

Pipes in Angular 2+ are a great way to transform and format data right from your templates.

Pipes allow us to change data inside of a template; i.e. filtering, ordering, formatting dates, numbers, currencies, etc. A quick example is you can transfer a string to lowercase by applying a simple filter in the template code.

---

Chaining pipes

You can chain pipes together in potentially useful combinations.

Pipes are chaining, so you can use multiple combination of pipes. Example:

The chained hero's birthday is {{ birthday  | date            | uppercase}}
The chained hero's birthday is {{  birthday | date:'fullDate' | uppercase}}

{{ cars | slice:0:2 | json }}

---

Making Pipes Available

Add to @NgModule « If you add to module then it is available to all the component's of that module.

@NgModule({
  declarations: [
    AppComponent,
    TotoalCommnonComponents,
    ViewdelayDirective,
    HighlightElementDirective,
    ReverseStrPipe,
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,

    UsersModule,
    LogIntoAppModule
  ],
  providers: [ AuthGuardService ],
  bootstrap: [AppComponent]
})
export class AppModule { }

---

Built-in Pipes in Angular

Angular comes with a stock of pipes such as DatePipe, UpperCasePipe, LowerCasePipe, CurrencyPipe, and PercentPipe. They are all available for use in any template. API List of Pipes

LowerCase & UpperCase « Covert text to either lower case or upper case with the respective pipe:

{{ user.name | uppercase }}
{{ user.name | lowercase }}

Json « The Json pipe is useful for debugging and displays an object as a Json string. It uses JSON.stringify behind the scenes:

{{ someObject | json }}
{{arrayData | json }}

Date « Format date values with the Date pipe:

{{ someDate | date:'medium' }}
{{ someDate | date:'fullDate' }}
{{ someDate | date:'yy' }}
{{ someDate | date:'Hm' }}

<p>{{ dateOfBirthday | date:'ddMMyyyy' }}</p>
<!-- will display '13/06/1985' -->
<p>{{ dateOfBirthday | date:'longDate' }}</p>
<!-- will display 'June 13, 1985' -->
<p>{{ dateOfBirthday | date:'HHmmss' }}</p>
<!-- will display '03:45:15' -->
<p>{{ dateOfBirthday | date:'shortTime' }}</p>
<!-- will display '03:45 AM' -->

You can use a number of symbols to define a custom format, or you can also use a number of predefined keywords. The available keywords are the following: ‘medium’, ‘short’, ‘fullDate’, ‘longDate’, ‘mediumDate’, ‘shortDate’, ‘mediumTime’ and ‘shortTime’.

Number « Allows us to format a number:

<p>{{ 98745 }}</p>
<!-- will display '98745' -->
Using the pipe:

<p>{{ 98745 | number }}</p>
<!-- will display '98,745' -->

Currency « Allows us to format an amount of money into currency.

<p>{{ 51.5 | currency:'EUR' }}</p>
<!-- will display 'EUR51.5' -->
<p>{{ 51.5 | currency:'USD':true }}</p>
<!-- will display '$51.5' -->
<p>{{ 51.5 | currency:'USD':true:'.2' }}</p>
<!-- will display '$51.50' -->

Percent « Allows us to display a percentage.

<p>{{ 0.5 | percent }}</p>
<!-- will display '50%' -->

SlicePipe « Allows us to display part of a list.

expression | slice:start[:end]

---

Creating Custom Pipes

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

@Pipe({name: 'reverseStr'})
export class ReverseStr implements PipeTransform {
  transform(value: string): string {
    let newStr: string = "";
    for (var i = value.length - 1; i >= 0; i--) {
      newStr += value.charAt(i);
    }
    return newStr;
  }
}

Then you’d include the custom pipe as a declaration in your app module:

declarations: [
    AppComponent,
    ReverseStr
  ],