How To Use Async Pipe in Angular 8

Siddharth Gajbhiye

Apr. 20, 20 · Tutorial

Likes (5)

Comment

Save

63.0K Views

Introduction

In this article, we are going to learn how to use an Async Pipe in Angular applications.

What Is Async Pipe?

Async Pipe is an impure pipe that automatically subscribes to an observable to emit the latest values. It not only subscribes to an observable, but it also subscribes to a promise and calls the then method. When the components get destroyed, it automatically unsubscribes them to reduce memory leaks.

Advantages of Async Pipe

Async Pipe makes the rendering of data from observable and promise easier.
For promises, it automatically calls the then method.
For observables, it automatically calls subscribe and unsubscribe.

Prerequisites

Basic knowledge of Angular.
Visual Studio Code must be installed.
Angular CLI must be installed.
Node JS must be installed.

Step 1

Let's create a new Angular project, using the following NPM command:

    TypeScript
   
xxxxxxxxxx

ng new asyncPipe

Step 2

Now, let's create a new component by using the following command:

    TypeScript
   
xxxxxxxxxx

ng g c async-pipe-example

Step 3

Now, open the async-pipe-example.component.html file and add the following code in the file:

    HTML
   
 

     
    
xxxxxxxxxx

            
          
<div class="card">    
  <div class="card-body pb-0">    
    <h4 style="text-align: center;">{{SampleMessage}}</h4>    
    <div class="row">    
      <div class="col-12 col-md-12">    
        <div class="card">    
    
          <div class="card-body position-relative">    
            <div class="table-responsive cnstr-record product-tbl">    
              <table class="table table-bordered heading-hvr">    
                <thead>    
                  <tr>    
                     
                    <th width="50">Art.No    
                    </th>    
                    <th>Brand</th>    
                    <th>    
                      Price/Unit</th>    
                    <th>Provider</th>    
                    <th>P. Art. N</th>    
                    <th>S. A/C</th>    
               
                  </tr>    
                </thead>    
    
                <tbody *ngFor="let product of products$ | async">    
                  <tr>    
                    <td align="center">{{product.ArtNo}}</td>    
                    <td>{{product.Brand}}</td>    
                    <td>{{product.Price }}</td>    
                    <td>{{product.Provider}}</td>    
                    <td>{{product.ProviderArtNo}}</td>    
                    <td>{{product.SalesAccount}}</td>    
                 
                  </tr>    
                </tbody>    
              </table>    
            </div>    
          </div>    
        </div>    
      </div>    
    </div>    
  </div>    
</div>  

Here, in the following code, we can see how to apply async pipe with our structural directive, *ngFor.

    HTML
   
xxxxxxxxxx

<tbody *ngFor="let product of products$ | async">

Step 4

Now, open the async-pipe-example.component.ts file and add the following code in the file:

    TypeScript
   
 

     
    
xxxxxxxxxx

            
          
import { Component, OnInit } from '@angular/core';    
import { ProductsService } from '../product.service';    
import { Observable } from 'rxjs';    
    
@Component({    
  selector: 'app-async-pipe-example',    
  templateUrl: './async-pipe-example.component.html',    
  styleUrls: ['./async-pipe-example.component.css']    
})    
export class AsyncPipeExampleComponent implements OnInit {    
  products = [];    
  products$:Observable<any>;    
  SampleMessage="Example of Angular Async Pipe";    
    
  constructor(private _productService:ProductsService) { }    
    
  ngOnInit() {    
    //this.getProductsUsingSubscribeMethod();    
    this.getProductsUsingAsyncPipe();    
  }    
    
  public getProductsUsingSubscribeMethod() {    
    this.SampleMessage="Example of Angular Subscribe Method";    
    this._productService.getAllProducts().subscribe((data: any) => {    
      this.products =data;    
      console.log(data);    
    })    
  }    
    
  public getProductsUsingAsyncPipe() {    
    this.SampleMessage="Example of Angular Async Pipe";    
    this.products$ =this._productService.getAllProducts();    
  }    
    
}  

Here, in the following code, we are using observables of any type. To get the asynchronous flow data, we can use the subscribe method to subscribe to the observables, or we can simply use async pipe, which automatically subscribes to an observable and returns the latest value. It also unsubscribes automatically to avoid memory leaks.

    TypeScript
   
xxxxxxxxxx

public getProductsUsingAsyncPipe() {      
  this.SampleMessage="Example of Angular Async Pipe";      
  this.products$ =this._productService.getAllProducts();      
}

Step 5

Now, open the product.service.ts file and add the following code:

    TypeScript
   
 

     
    
xxxxxxxxxx

            
          
import { Injectable } from '@angular/core';    
import { HttpClient } from '@angular/common/http';    
  
@Injectable()       
export class ProductsService {      
    private url = '';    
    private baseUrl = "http://localhost:49661/";//Replace it with your http address and port      
    constructor(public http: HttpClient) {    
    }      
    getAllProducts() {    
        this.url = this.baseUrl+'api/Product/getAllProducts';    
        return this.http.get<any[]>(this.url);    
    }      
}  

Web API: Create an ASP.NET Application

Follow these steps to create an ASP.NET application.

Step 1

In Visual Studio 2019, click on File -> New -> Project.

Creating a new ASP.NET project

Step 2

Choose the Create option and select ASP.NET web application.

Creating a new ASP.NET app

Step 3

Select Web API and click OK.

Adding Web API

Step 4

Now, right-click on the controller and then add a new item.

Adding a new item

Step 5

Choose Ado.net Entity Data Model and then click on Add.

Creating a new data model

Step 6

The next step focuses on the EF Designer. Just click on Next.

Selecting EF Designer

Step 7

A new pop-up will show. Click on Next. If yours isn't established, then click on New Connection.

Choosing connection

Step 8

Copy your database connection server name and paste it in the server name textbox. You will see all the databases. Select your database and click on OK.

Selecting correct database

Step 9

The next popup will show. Paste your database server name, choose the database, and test for the connection. Then, click Next. Here, in the new screen, select your tables and store the procedure. Then, click on Finish.

Choosing database objects and store

Our next step is to right-click on the controllers folder, and add a new controller. Name it as "Product controller" and add the following namespace in the student controller.

Here is the complete code for getting all the product data and their nested product information data.

Complete Product controller code

    C#
   
 

     
    
xxxxxxxxxx

            
          
using System.Linq;  
using System.Web.Http;  
using CompanyDetails.Models;  
namespace CompanyDetails.Controllers {  
    [RoutePrefix("api/Company")]  
    public class CompanyController: ApiController {  
        CompanyEntities2 DB = new CompanyEntities2();  
        [HttpGet]  
        [Route("getAllProducts")]  
        public object getAllProducts(string countrycode) {  
            var productDetails = DB.USP_GetAllProducts().ToList();  
            return productDetails;  
        }  
    }  
}  

Now, it's time to enable CORS. Go to Tools, open NuGet Package Manager, search for CORS, and install the "Microsoft.Asp.Net.WebApi.Cors" package.

If you are running your frontend application in a different port and your server is running in another port, then to avoid a Cross-Origin-Resource-Sharing issue you have to add small code in webapiconfig.cs file.

Open Webapiconfig.cs and add the following lines.

    C#
   
xxxxxxxxxx

EnableCorsAttribute cors = new EnableCorsAttribute("*", "*", "*");  
config.EnableCors(cors);

Backend

Here, we will do back end related code using SQL Server. The very first step is to create a database.

Create Database

Let’s create a database on your local SQL Server. I hope you have installed SQL Server 2017 on your machine (you can use SQL Server 2008, 2012, or 2016, as well).

Step 1

Create a database product:

    SQL
   
xxxxxxxxxx

create database product

Step 2

Create a product table using the following code:

    SQL
   
 

     
    
xxxxxxxxxx

            
          
USE [Product]  
GO  
/****** Object: Table [dbo].[Product] Script Date: 12/18/2019 10:23:19 PM ******/  
SET ANSI_NULLS ON  
GO  
SET QUOTED_IDENTIFIER ON  
GO  
CREATE TABLE [dbo].[Product](  
[ProductId] [int] IDENTITY(1,1) NOT NULL,  
[ArtNo] [nvarchar](50) NULL,  
[Provider] [nvarchar](50) NULL,  
[ProviderArtNo] [nvarchar](50) NULL,  
[Brand] [nvarchar](50) NULL,  
CONSTRAINT [PK_Product] PRIMARY KEY CLUSTERED  
(  
[ProductId] ASC  
)WITH (PAD_INDEX = OFF, STATISTICS_NORECOMPUTE = OFF, IGNORE_DUP_KEY = OFF, ALLOW_ROW_LOCKS = ON, ALLOW_PAGE_LOCKS = ON) ON [PRIMARY]  
) ON [PRIMARY]  
GO  

Make product ID the primary key. Now, it's time to add some store procedures.

Step 4

All you have to do is paste the following code in a new query:

    SQL
   
 

     
    
x

            
          
USE [Product]  
GO  
/****** Object: StoredProcedure [dbo].[USP_GetAllProducts] Script Date: 12/18/2019 10:24:35 PM ******/  
SET ANSI_NULLS ON  
GO  
SET QUOTED_IDENTIFIER ON  
GO  
ALTER Proc [dbo].[USP_GetAllProducts]  
As  
Begin  
Select p.*,pci.Price,pci.BuyAccount,pci.SalesAccount from [Product] p  
End  

With this step, we have successfully completed our frontend, web API, and backend coding. Now, it's time to run the project by using npm start or ng serve and check the output.

Conclusion

In this article, we have learned how to use an Async Pipe in Angular 8 Application.

Please give your valuable feedback/comments/questions about this article. Please let me know if you liked and understood this article and how I could improve it.

Database connection AngularJS Web API application

Opinions expressed by DZone contributors are their own.

Related

Trending

How To Use Async Pipe in Angular 8

Introduction

What Is Async Pipe?

Advantages of Async Pipe

Prerequisites

Step 1

Step 2

Step 3

Step 4

Step 5

Web API: Create an ASP.NET Application

Step 1

Step 2

Step 3

Step 4

Step 5

Step 6

Step 7

Step 8

Step 9

Backend

Create Database

Step 1

Step 2

Step 4

Conclusion

Related

Partner Resources