Click here to Skip to main content
16,016,570 members
Articles / Web Development / ASP.NET / ASP.NET Core

Getting Started with Angular 7 And ASP.NET Core 2.1

Rate me:
Please Sign up or sign in to vote.
5.00/5 (13 votes)
27 Jan 2019CPOL9 min read 39.9K   661   42   2
Getting started with Angular 7 and ASP.NET Core 2.0 using Angular 7 Web Application (.NET Core) Template and ASP.NET Core MVC Application

Introduction

In this article, let’s see in detail about getting started with Angular 7 and ASP.NET Core 2.0 using Angular 7 Web Application (.NET Core) Template and ASP.NET Core MVC Application. We will also see in detail about how to work with Angular 7 new features of Virtual Scrolling and Drag and Drop Items.

If you are new to Angular, then read my previous articles from the below links:

Image 1

Background

Prerequisites

Make sure you have installed all the prerequisites on your computer. If not, then download and install all, one by one.

  1. First, download and install Visual Studio 2017 from this link.
  2. Download and install .NET Core 2.0 or above version.
  3. Download and install Node.js latest version from this download link.

Using the Code

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

Angular 7 Web Application (.NET Core) using 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

Image 2

Download and Install the Template.

Image 3

We can see as 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.

Image 4

You can see as new Angular7 project has been created also, we can see the ASP.NET Core Controller and Angular 7 Client App folder from the solution explorer.

4.png

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

Image 6

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 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 like below:

Image 7

ClientApp Folder

Our Angular files will be under the ClientApp folder. If we want to work with component or HTML, then we open the app folder under ClientApp and we can see the app.Component.ts and app.Component.html.Image 8

Now we can change the Title from our component file and display the new sub title with date time 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 in our HTML page.

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

Image 9

In our HTML page, we bind the newly declared variable datetime with the below code:

HTML
<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 as the title has been updated and displaying today's date and time as shown in the below image:

Image 10

Using ASP.NET Core Web Application

Step 1- Create ASP.NET Core Web Application

Click Start >> Programs >> Visual Studio 2017 >> Visual Studio 2017, on your desktop.

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

Image 11

Select Angular Project and click OK.  

Image 12

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.

Image 13

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

First, we delete the ClientApp folder from our project.

Image 14

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 and create new ClientApp folder for working with Angular 7.

>> ng new ClientApp

Image 15

It will take a few seconds to install all the Angular 7 Packages and we can see the installing package details and confirmation from our command window.

Image 16

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

Image 17

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. Once we run the application, we can see a sample Angular 7 page like below:

Image 18

What’s New in Angular 7

Virtual Scrolling and Drag and Drop are major features added in the Angular 7 CDK. If we have a large number of item in the list and want a fast performance scrolling to load and display all the items, then we can use the new Angular 7 Virtual Scrolling to scroll the items in the List. Using the Angular 7 Drag and Drop, now we can drag and drop the item to the same list or to another list. We will be seeing in detail how to work with Angular 7 Virtual Scrolling and Drag and Drop with example below.

Installing Angular CDK

For working with Virstual Scrolling and Drag and Drop, we need to install the Angular CDK package to our project. To add this, we open the command prompt and go to our project ClientApp Folder path and enter the below code and run the command.

Image 19

We can see the confirmation message in command prompt as the Angular CDK packages have been added to our project.

Image 20

Virtual Scrolling

App Module - Importing the Scrolling Module to our App

In order to work with Virtual scrolling, after adding the CDK project, 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 the ScrollingModule to create our Virtual Scrolling in our application.

Image 21

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

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

Also, we need to add the import section, add the ScrollingModule to work with Virtual Scrolling.

JavaScript
  imports: [
    BrowserModule,
    AppRoutingModule,
    ScrollingModule
],

Our code will look like the below image:

Image 22

App Component

For adding item 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.

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

The complete code will look like this:

Image 23

Adding the CSS

For our List scrolling, we will be adding the below CSS to design our list with c rounded corner and adding colors. Add the below css code to your app.component.css file:

CSS
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 to add the Virtual Scrolling function to the List for scrolling the item from the list. Open app.component.html and add the below code to display the item in list with Virtual Scrolling features added.

Inside the list, we use the cdk-virtual-scroll-viewport to add the virtual scrolling to our list and here, we set the width and height of the List with the Itemsize per each scroll.

HTML
<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>

Run the Application

Image 24

Drag and Drop

App Module - Importing the DragDrop Module to our 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 be working with our default app.module.ts to import the DragDrop Module to create our Drag and Drop items in our application.Image 25

Add the below code in import section of your module to import the Drag and Drop.

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

Also, we need to add the import section add the ScrollingModule to work with Virtual Scrolling.

JavaScript
  imports: [
    BrowserModule,
    AppRoutingModule,
    ScrollingModule ,
    DragDropModule
],

Our code will look like the below image:

Image 26

App Component

For adding item 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.

JavaScript
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);
  }}

Here, we have used the Increment Array we use for the Virtual Scrolling and Decrement array item we use for the Drag and Drop.

Now, we need to Import the CdkDragDrop with MoveItemInArray to create the Drop event for adding the dragged item during drop at the selected position in the list.  

JavaScript
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.

JavaScript
drop(event: CdkDragDrop<string[]>) {

    moveItemInArray(this.decrementValue, event.previousIndex, event.currentIndex);

  }

The complete code will look like this:

Image 27

Adding the CSS

For our List Drag Drop, we will be adding the below CSS to design our list. Add the below CSS code to your app.component.css file:

CSS
.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 to add the Drag and Drop function to 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 element inside the cdkDroplist for adding the item with cdkDrag features for dragging the item inside the selected div element.

HTML
<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>

Run the Application

Image 28

Points of Interest

Hope you liked this article. In our next post, we will see in detail how to perform CRUD operation using Angular 7 and ASP.NET Core with and Web API.

History

  • 2019-01-15: ASPNETCoreAngular7.zip

License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)


Written By
Team Leader
India India
Microsoft MVP | Code Project MVP | CSharp Corner MVP | Author | Blogger and always happy to Share what he knows to others. MyBlog

My Interview on Microsoft TechNet Wiki Ninja Link

Comments and Discussions

 
PraiseNice Article Pin
臧龙伟28-Jan-19 21:03
臧龙伟28-Jan-19 21:03 
QuestionVery Helpful Pin
Member 1146831915-Jan-19 17:23
Member 1146831915-Jan-19 17:23 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Praise Praise    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.