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:

 

Step 2

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

 

Step 3

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

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

Step 4

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

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.

Step 5

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

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.

Step 2

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

Step 3

Select Web API and click OK.

Step 4

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

Step 5

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

Step 6

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

Step 7

 A new pop-up will show. Click on Next. If yours isn’t established, then click on New 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.

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. 

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

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.

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:

Step 2

Create a product table using the following code:

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:

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.