Built-in Pipes in Angular 2 ← Alligator.io

#angular2 built-in Pipes overview  #webdev #angularjs

  • The third possible is a string in the format of the decimal pipe to format the number.
  • The optional argument is a string in the Decimal pipe format.
  • The Json pipe is useful for debugging and displays an object as a Json string.
  • You can use a number of symbols to define a custom format, or you can also use a number of predefined keywords.
  • The second possible argument is a boolean to show the that will show either the currency symbol, or the currency code.

Building a simple real time search in Angular 2 with observables and RxJs.

@legkoletat: #angular2 built-in Pipes overview #webdev #angularjs

Pipes in Angular give you an easy way to transform data directly in your templates. You can create your own custom pipes, and you can also use any of the following ones, which are part of the CommonModule and available right out of the box:

The Async pipe automatically subscribes to an Observable or a Promise and returns the emitted values as they come in:

The Currency pipe allows to format numbers in different currencies:

The first argument is a string with the local currency code.

The second possible argument is a boolean to show the that will show either the currency symbol, or the currency code. The default is false and shows the currency code.

The third possible is a string in the format of the decimal pipe to format the number.

Format date values with the Date pipe:

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’.

See the official API reference for a list of symbols.

The Decimal pipe formats decimal values:

In the above example (‘4.3-5’), 4 is for the minimum number of integer digits, 3 is for the minimum number of fraction digits and 5 is for the maximum number of fraction digits.

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

Covert text to either lower case or upper case with the respective pipe:

The Percent pipe transforms a number into it’s percentage value:

The optional argument is a string in the Decimal pipe format.

Create a subset list or string with the Slice pipe:

The arguments are the start index and the end index. The end index can be omitted, and the resulting list or string will contain everything from the start index to the end.

Built-in Pipes in Angular 2 ← Alligator.io