Pipes in Angular Part – 4 : SlicePipe, JSONPipe, AsyncPipe

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.

• Pipes in Angular Part – 1 : lowercase, uppercase, and titlecase pipes
• Pipes in Angular Part – 2 : DatePipe
• Pipes in Angular Part – 3 : CurrencyPipe, PercentPipe

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

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  animalArray: string[] = ['Tiger', 'Lion', 'Wolf', 'Elephant', 'Monkey'];
}

<div style="text-align:left">
  <ul>
    <li *ngFor = "let obj of animalArray | slice:2:4">{{obj}}</li>
  </ul>
</div>

//Component
export class AppComponent {
  str: string = 'abcdefg';
}

//HTML
<div style="text-align:left">
    <p> {{str | slice:2:4}}</p>
</div>

//Output: cd

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

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  obj: object = {name: 'Yatendrasinh', lastName: 'Joddha', Degrees: {Graduations: 'BCA', Masters: 'MCA'}};
}

<div style="text-align:left">
    <p> {{obj | json}}</p>
</div>

//Output: 

{ "name": "Yatendrasinh", "lastName": "Joddha", "Degrees": { "Graduations": "BCA", "Masters": "MCA" } }

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

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

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  greeting: Promise<string>|null = null;
  arrived: boolean = false;
 
  private resolve: Function|null = null;
 
  constructor() { this.reset(); }
 
  reset() {
    this.arrived = false;
    this.greeting = new Promise<string>((resolve, reject) => { this.resolve = resolve; });
  }
 
  clicked() {
    if (this.arrived) {
      this.reset();
    } else {
      this.resolve !('hi there!');
      this.arrived = true;
    }
  }
}

app.component.html

<div>
    <code>promise|async</code>: 
    <button (click)="clicked()">{{ arrived ? 'Reset' : 'Resolve' }}</button>
    <span>Wait for it... {{ greeting | async }}</span>
</div>

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 have healthy knowledge and experience in Azure, O365 and ASP.Net with c#, MVC, WebApi along with client-side frameworks and libraries like JavaScript, JQuery, KnockoutJs, AngularJs, Angular, ReactJs, NodeJs