{{announcement.body}}
{{announcement.title}}

How To Use Async Pipe in Angular 8

DZone 's Guide to

How To Use Async Pipe in Angular 8

In this article, we discuss how to use Async Pipe in Angular applications to better handle data and manage observables and subscriptions.

· Web Dev Zone ·
Free Resource

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

  1. Async Pipe makes the rendering of data from observable and promise easier.
  2. For promises, it automatically calls the then method.
  3. 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

 

Step 2

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

TypeScript

 

Step 3

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

HTML


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

HTML


Step 4

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

TypeScript


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


Step 5

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

TypeScript


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
Creating a new ASP.NET project

Step 2

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

Creating a new ASP.NET application
Creating a new ASP.NET app

Step 3

Select Web API and click OK.

Creating Web API
Adding Web API

Step 4

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

Adding 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
Creating a new data model

Step 6

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

Selecting EF Designer
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
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
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
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#


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#


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


Step 2

Create a product table using the following code:

SQL


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


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.

Topics:
angular 8, async pipe, tutorial, typescript, web dev

Opinions expressed by DZone contributors are their own.

{{ parent.title || parent.header.title}}

{{ parent.tldr }}

{{ parent.urlSource.name }}