In the previous section, we understood what the MVVM pattern is and how it works. In this section, we will use our FlixOne application and build an application using Angular. To demonstrate the MVVM pattern, we will use the API built on ASP.NET Core 2.2.

Start Visual Studio and open FlixOne Solution from the FlixOneMVVM folder. Run the FlixOne.API project where you will see the following Swagger documentation page:

The preceding screenshot is the snapshot of our Product APIs documentation, where we have incorporated Swagger for the API documentation. If you want to, you can test the API from this screen. If the APIs are returning results, then your project is successfully set up. If not, please check the prerequisites for this project, and also check the README.md file from the Git repository for this chapter. We have everything that is required to build a new UI; as discussed previously, we will create an Angular application that will consume our Product APIs. To get started, follow these steps:

1. Open the Solution Explorer.
2. Right-click on FlixOne Solution. 
3. Click on Add New Project.

4. From the Add New Project window, select ASP.NET Core Web Application. Call it FlixOne.Web and click OK. After doing so, refer to this screenshot:

5. From the next window, select Angular, make sure you have selected ASP.NET Core 2.2, click OK, and refer to this screenshot:

6. Open Solution Explorer and you will find the new FlixOne.Web project and folder hierarchy, which looks like this:

7. From the Solution Explorer, right-click on the FlixOne.Web project, and click on the Set as Startup project, and then refer to the following screenshot:

8. Run the FlixOne.Web project and see the output, which will look like the following screenshot:

We have set up our Angular app successfully. Go back to your Visual Studio and open the Output window. Refer to the following screenshot:

You will find ng serve "--port" "60672" from the Output window; this is a command that tells the Angular app to listen and serve. Open the package.json file from Solution Explorer; this file belongs to the ClientApp folder. You will notice "@angular/core": "6.1.10", which means our application is built on angular6.

The following is the code of our product.component.html (this is a view):

<table class='table table-striped' *ngIf="forecasts">
  <thead>
    <tr>
      <th>Name</th>
      <th>Cat. Name (C)</th>
      <th>Price(F)</th>
      <th>Desc</th>
    </tr>
  </thead>
  <tbody>
    <tr *ngFor="let forecast of forecasts">
      <td>{{ forecast.productName }}</td>
      <td>{{ forecast.categoryName }}</td>
      <td>{{ forecast.productPrice }}</td>
      <td>{{ forecast.productDescription }}</td>
    </tr>
  </tbody>
</table>

Run the application from Visual Studio, and click on Product, where you will get a Product Listing screen similar to this:

In this section, we have created a small demo application in Angular.