Create an Angular 7 App with ASP.NET Core 2.1

Introduction

This tutorial will guide you and help you through getting started with Angular 7 and ASP.NET Core 2.1. In this tutorial, we use Angular 7 Web Application (.NET Core) Template in an ASP.NET Core MVC Application. We will also learn how to work with two new features added to Angular 7, i.e., Virtual Scrolling and Drag and Drop Items.

If you are new to Angular, please read my previous articles from the following links:

• Getting Started With ASP.NET Core 1.0 RC2 And Angular2
• Getting Started With ASP.NET Core And Angular 4 Using WEB API
• Getting Started With Angular 5 And ASP.NET Core

 

Prerequisites

Make sure you have installed all the prerequisites on your computer. If not, then download and install all of the following tools in the same order.

1. First, download and install Visual Studio 2017 from this link. Visual Studio Community version is free. You can also use any later versions including Visual Studio 2019. 
2. Download and install .NET Core 2.0 or later versions.
3. Download and install the latest version of Node.js from this download link.

Angular 7 Web Application (.NET Core) using Template

 

Now, it’s time to create our first ASP.NET Core and Angular 7 application using the template. 

Step 1. Create Angular 7 ASP.NET Core using Template

After installing all the prerequisites listed above, click Start >> Programs >> Visual Studio 2017 >> Visual Studio 2017 on your desktop.

Click New >> Project. Select Online >> Template >> Search for Angular 7 .NetCore 2 Template.

 

Download and install the template.

 

We can see that the new Angular 7 Web Application (.NET Core) template has been added. Select the template, add your project name, and click OK to create your Angular 7 application using ASP.NET Core.

 

You can see that a new Angular 7 project has been created. Also, we can see the ASP.NET Core Controller and Angular 7 Client App folder from the Solution Explorer.

 

If we open the package.json file, we can see the new Angular 7 package has been installed to our project.

 

Angular CLI

 

We need to upgrade our Angular CLI to version 7. If you have not yet installed the Angular CLI, then first install Angular CLI and upgrade to Angular CLI version 7.

Now, let’s start working with the Angular part.

First, we need to install the Angular CLI to our project.  

Angular CLI is a command line interface to scaffold and build Angular apps using node.js style (commonJS) modules. For more details click here 

To install the Angular CLI to your project, open the Visual Studio Command Prompt and run the below command.

npm i -g @angular/cli

Step 2 - Build and Run the Application

Now, our application is ready to build and run. To see the sample Angular 7 page, once we run the application, we can see a sample Angular 7 page that looks like below.

 

ClientApp folder

Our Angular files are in the ClientApp folder. If we want to work with a component or an HTML page, we open the app folder in ClientApp and we can see app.Component.ts and app.Component.html.

 

Now we can change the title from our component file and display a new subtitle with a datetime in our app HTML page.

In our app.Component.ts file, we changed the default title and also added a new variable to get the current date and time to display on our html page.

title = 'Welcome to Shanu Angular 7 Web page';
subtitle = '.NET Core + Angular CLI v7 + Bootstrap & FontAwesome + Swagger Template';
datetime = Date.now();

 

In our html page, we bind newly declared variable datetime as shown in the following code:

<h1>{{title}}</h1>
     <h3>{{subtitle}}</h3>
     <h4>
    Current Date and Time:   {{datetime | date:'yyyy-MM-dd hh:mm'}}
</h4>

When we run the application, we can see the title has been updated and it displays today's date and time. See the below image.

 

 

 

Using ASP.NET Core Web Application

We can also use ASP.NET Core Web Application template to build an Angular 7 app.

Step 1. Create ASP.NET Core Web Application

Launch Visual Studio 2017.

Click New >> Project. Select Web >> ASP.NET Core Web Application. Enter your project name and click OK.

 

 

Select Angular Project and click OK.

 

Step 2. Upgrade to Angular 7

By default, we can see the Angular 5 version has been installed in our project. We can check this from our Package.json file. 

 

For upgrading to Angular 7, first we delete the ClientApp folder from project and create a new ClientApp from the Command prompt.

First, we delete the ClientApp folder from our project.

 

To install and create a new ClientApp with Angular7 packages, open a command prompt and go to our project folder, enter the below command and run to install the Angular 7 Packages. This action will create a new ClientApp folder.

>> ng new ClientApp

 

It will take few seconds to install all the Angular 7 Packages. You may notice the command line activity of installing packages.

 

We can see a new ClientApp folder has been created in our project. When we open Package.json file, the Angular 7 Version has been installed in our project.

 

Note
We need to upgrade our Angular CLI to version 7. If you have not yet installed the Angular CLI then first install the Angular CLI and upgrade to Angular CLI version 7.

Now, let’s start working with the Angular part.

First, we need to install the Angular CLI to our project

Angular CLI

Angular CLI is a command line interface to scaffold and build Angular apps using node.js style (commonJS) modules. For more details click here

To install the Angular CLI to your project, open the Visual Studio Command Prompt and run the below command.

npm i -g @angular/cli

Step 3. Build and Run the Application

Now our application is ready to build and run. To see the sample Angular 7 page, run your application. You will see a page that looks like the following image.

 

What’s new in Angular 7

Virtual Scrolling and Drag and Drop are two major features added to Angular 7 CDK. If we have a large number of items in a list and want fast performance scrolling to load and display its items, we can use the Virtual Scrolling feature. Angular 7 Drag and Drop feature allows us to drag and drop items of list to same list or to another list. 

Let's see how these two features work in a real working app.

 

Installing Angular CDK

To implement Virtual Scrolling and Drag and Drop features in our Angular 7 app, we need to install Angular CDK package.

To do so, open command prompt and go to our project's ClientApp Folder path and run the following command.

 

 

You'll see the package are being installed with success messages. Angular CDK packages have been added to our project.

 

 

Virtual Scrolling

App Module - Importing the Scrolling Module to our App

In order to work with Virtual Scrolling feature, we need to import the ScrollingModule to our Modules app.

Open our Module.ts file.

Here we will be working with our default app.module.ts to import ScrollingModule to implement virtual scrolling in our application.

Add the below code in the import section of your module to import the ScrollingModule.

 

import { ScrollingModule } from '@angular/cdk/scrolling';

Also, we need to add the import section that adds the ScrollingModule.

  imports: [
    BrowserModule,
    AppRoutingModule,
    ScrollingModule
],

Our new code looks like the following:

 

App Component

To display items, we need a list of items.

We're going to create an array of items. The Item variable represents an item of the list. An array is a collection of items and will be used as the data source to display in the list.

 

Open the app.component.ts file and add the below code in your component export class.

incrementValue: number[] = [];
  constructor() {
    for (let index = 1; index <= 200; index++) {
      this.incrementValue.push(index);
    }

The complete code will look like this. As you can see from the below code, we have a component with variables, title, subtitle, and datetime. Our constructor creates 200 items,. 

 

Add CSS

For our List scrolling, we will format the list using CSS to provide additional formatting including rounded corners and colors.

Add the below CSS code to your app.component.css file:

ul {
  max-width: 800px;
  color: #cc4871;
  margin: 20px auto;
  padding: 2px;
}

.list li {
  padding: 20px;
  background: #f8d8f2;
  border-radius: 12px;
  margin-bottom: 12px;
  text-align: center;
  font-size: 12px;
}

Design your HTML page to display the List with CDK Virtual Scrolling

Now it's time to design our html page that will implement Virtual Scrolling functionality to a List of items.

Open app.component.html and add the below code to display the list with Virtual Scrolling enabled.

 

Inside the list, we use the cdk-virtual-scroll-viewport to add the virtual scrolling to our list. Here we also set the width and the height of the List with the Item size per scroll.

<h2>Angular 7 Virtual Scrolling </h2>
<hr />
  <ul class="list">
    <cdk-virtual-scroll-viewport style="width:200px;height: 300px" itemSize="5">
      <ng-container *cdkVirtualFor="let incValue of incrementValue">
        <li> Loop {{incValue}}  </li>
      </ng-container>
    </cdk-virtual-scroll-viewport>
  </ul>
  <router-outlet></router-outlet>

Now build and run the application.

The outlook looks like the following where you can see there is a list of 200 items and virtual scrolling lets you scroll the items.

 

Implement Drag and Drop in Angular 7

 

Now, let's see how we can add the drag and drop functionality to our app by using Angular 7's new Drag and Drop feature. 

 

Add DragDrop Module to the App

In order to work with Drag and Drop after adding the CDK project, we need to import the DragDrop Module to our Modules app.

Open our app.Module.ts file. Here we will work with our default app.module.ts to import the DragDrop Module to create our Drag and Drop items in our application.

 

Add the below code in the import section of the module.

import { DragDropModule } from '@angular/cdk/drag-drop';

Also we need to add the import section and add the ScrollingModule to support virtual scrolling.

imports: [
  BrowserModule,
  AppRoutingModule,
  ScrollingModule ,
  DragDropModule

Our new code looks like the following image.

 

App Component

For adding items to the list, we need an Item. For creating the Item in our app component, we create a new array and add items to the array in the constructor. By this when the page loads the new array Item will be created with new values.

Open the app.component.ts file and add the below code in your component export class.

incrementValue: number[] = [];

  decrementValue: number[] = [];
  constructor() {
    for (let index = 1; index <= 200; index++) {
      this.incrementValue.push(index);
    }

    for (let int1 = 400; int1 >= 201; int1--) {
      this.decrementValue.push(int1);
    }
  }

  drop(event: CdkDragDrop<string[]>) {
    moveItemInArray(this.decrementValue, event.previousIndex, event.currentIndex);
  }
}

Now, we need to Import the CdkDragDrop with MoveItemInArray to create the Drop event. The Drop event is fired when an item is dragged and dropped to the list at a selected position.

import { CdkDragDrop, moveItemInArray } from '@angular/cdk/drag-drop';

Then we add the drop event method inside our app component class for adding the selected item array to the selected current index.

drop(event: CdkDragDrop<string[]>) {
    moveItemInArray(this.decrementValue, event.previousIndex, event.currentIndex);
  }

The complete code looks like the following:

 

Add CSS

For our List Drag Drop functionality, we add the below CSS to design our list.

Add the below CSS code to your app.component.css file

.divClasslist {
  width: 200px;
  border: solid 1px #234365;
  min-height: 60px;
  display: block;
  background: #cc4871;
  border-radius: 12px;
  margin-bottom: 12px;
  overflow: hidden;
}
.divClass {
  padding: 20px 10px;
  border-bottom: solid 1px #ccc;
  color: rgba(0, 0, 0, 0.87);
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  box-sizing: border-box;
  cursor: move;
  background: #f8d8f2;
  font-size: 14px;
}
  .divClass:active {
    background-color: #cc4871;
  }

Design your HTML page to display the List with CDK Virtual Scrolling

Now it’s time to design our HTML page that will have the Drag and Drop functionality available in the List.

Open app.component.html and add the below code to display the item in list with Drag and Drop features added.

Here we create the cdkDropList div element with Drop event using cdkDropListDropped. We add one more div elevement inside the cdkDroplist for adding the item with cdkDrag features for dragging the item inside the selected div element.

<h2>Angular 7 Drag and Drop </h2>
<hr />
   <div cdkDropList class="divClasslist" (cdkDropListDropped)="drop($event)">
     <div class="divClass"  *ngFor="let decValue of decrementValue" cdkDrag>{{decValue}}</div>
   </div>
<router-outlet></router-outlet>

Now, build and run your application. The working output looks like the following. You can now drag and drop the list items to any position you like.

 

 

Conclusion

In this step by step tutorial, you learned how to build an Angular 7 Web app using Visual Studio. We also reviewed the newest features of Angular 7, virtual scrolling and drag and drop. In the end, we saw working demos of these features.

 

I hope you liked this article. In my next article, I will cover how to perform CRUD operations using Angular 7 in an ASP.NET Core app with the help of Web API.