Here is the fourth part of angular pipe series in this part we will discuss about SlicePipe, JSONPipe, and AsyncPipe. If you have not read previous articles here is the link for previous articles.

SlicePipe

SlicePipe creates the new Array or String containing the subset of given elements. It works same as JavaScript API Array.prototype.slice() and String.prototype.slice()

The slice() with Array returns the selected elements in an array, as a new array object. It will be the copy of the main object event if it is returning whole array.

The slice() with String selects the elements starting at the given start argument, and ends at, but does not include, the given end argument.

Syntax

{{ value_expression | slice : start [ : end ] }}
Let us consider below example for better understanding of this pipe.
app.component.ts

app.component.html

Output

  • Wolf
  • Elephant

We can also use this pipe for the string variable. Let us consider very short and quick example

JSONPipe

JSON Pipe is used to convert a value into its JSON format, which is mostly useful in debugging.

Syntax

{{ value_expression | json }}
Consider the below example for the understanding of the usage of this JSON pipe.
app.component.ts

app.component.html

AsyncPipe

It is used to opens a value from an asynchronous primitive. The async pipe subscribes to an Observable or Promise and returns the latest value it has produced. When a new value is produced, the async pipe marks the component to be checked for changes. When the component gets destroyed, the async pipe unsubscribes automatically to avoid possible memory leaks.

Syntax

{{ value_expression | async}}

Example

This example binds a Promise to the view. Clicking the Resolve button resolves the promise.

app.component.ts

app.component.html

Summary

Hope you are in love with reading the content. Don’t forgot to give your reviews. In next and final article of this series we will have a look on Custom Pipe.

Yatendrasinh Joddha
I am a software engineer currently living in Gandhinagar, India. My interest is in web and software development. I am also interested in sharing my knowledge with people.

I have expertise in asp.net and related Microsoft technologies, with JavaScript frameworks and libraries like JQuery, KnockOut.js,and AngularJS.
Yatendrasinh Joddha on FacebookYatendrasinh Joddha on GithubYatendrasinh Joddha on LinkedinYatendrasinh Joddha on TwitterYatendrasinh Joddha on Wordpress