Getting Started with ASP.NET Core and Angular using Project Template

17 May 20257 minutes to read

This guide provides detailed instructions on creating a simple ASP.NET Core application with the Angular Framework using the dotnet CLI, integrating it with Syncfusion Angular UI components.

Prerequisites

Ensure the following prerequisites are installed on your development machine before you start using Syncfusion Angular Components in an ASP.NET Core with Angular project:

Create an Application

Use the dotnet CLI to create an ASP.NET Core application with Angular:

  1. Open the command prompt in your desired directory and run the following command to create an ASP.NET Core application with Angular.
dotnet new angular -o Syncfusion-ASP.NET-Core-Angular
  1. Navigate to the application folder using the following command.
cd Syncfusion-ASP.NET-Core-Angular
  1. On Windows, set the ASPNETCORE_ENVIRONMENT environment variable to Development by running:
SET ASPNETCORE_ENVIRONMENT=Development

For Linux or macOS, run the export ASPNETCORE_ENVIRONMENT=Development in the terminal.

  1. Now, execute the build command to ensure the application builds correctly. During the initial run, the build process restores npm dependencies, which may take several minutes. Subsequent builds will be significantly faster.
dotnet build
  1. The ASP.NET Core with Angular project template has been successfully created.

Installing Syncfusion Grid Package

Syncfusion packages are available on npm under the @syncfusion scope. Access all Syncfusion Angular packages via this npm link.

To install the Syncfusion Angular DataGrid package, navigate to the ClientApp folder and execute the following commands:

cd ClientApp

npm install @syncfusion/ej2-angular-grids --save

Adding Grid Module

After installing the package, configure the component modules in your application using the installed Syncfusion package. Open the ~/src/app.module.ts file located in the ClientApp folder using Visual Studio Code or your preferred code editor, and use the following code snippet to import the Grid module.

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { HttpClientModule } from '@angular/common/http';
import { RouterModule } from '@angular/router';

import { AppComponent } from './app.component';
import { NavMenuComponent } from './nav-menu/nav-menu.component';
import { HomeComponent } from './home/home.component';
import { CounterComponent } from './counter/counter.component';
import { FetchDataComponent } from './fetch-data/fetch-data.component';

// Imported Syncfusion grid module from grids package
import { GridModule } from '@syncfusion/ej2-angular-grids';

@NgModule({
  declarations: [
    AppComponent,
    NavMenuComponent,
    HomeComponent,
    CounterComponent,
    FetchDataComponent
  ],
  imports: [
    BrowserModule.withServerTransition({ appId: 'ng-cli-universal' }),
    HttpClientModule,
    FormsModule,
    //Registering EJ2 grid module
    GridModule,
    RouterModule.forRoot([
      { path: '', component: HomeComponent, pathMatch: 'full' },
      { path: 'counter', component: CounterComponent },
      { path: 'fetch-data', component: FetchDataComponent },
    ])
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

Adding Syncfusion Component

Insert the following grid component code snippet in the ~/src/home/home.component.ts file as follows.

import { Component } from '@angular/core';

@Component({
  selector: 'app-home',
  template: `
  <h1>
    Syncfusion Angular UI Grid!
  </h1>

  <ejs-grid [dataSource]='data'>
    <e-columns>
      <e-column field='OrderID' headerText='Order ID' textAlign='Right' width=90></e-column>
      <e-column field='CustomerID' headerText='Customer ID' width=120></e-column>
      <e-column field='Freight' headerText='Freight' textAlign='Right' format='C2' width=90></e-column>
      <e-column field='OrderDate' headerText='Order Date' textAlign='Right' format='yMd' width=120></e-column>
    </e-columns>
  </ejs-grid>
 `
})

export class HomeComponent {
  public data: Object[] = [
    {
      OrderID: 10248, CustomerID: 'VINET', EmployeeID: 5, OrderDate: new Date(8364186e5),
      ShipName: 'Vins et alcools Chevalier', ShipCity: 'Reims', ShipAddress: '59 rue de l Abbaye',
      ShipRegion: 'CJ', ShipPostalCode: '51100', ShipCountry: 'France', Freight: 32.38, Verified: !0
    },
    {
      OrderID: 10249, CustomerID: 'TOMSP', EmployeeID: 6, OrderDate: new Date(836505e6),
      ShipName: 'Toms Spezialitäten', ShipCity: 'Münster', ShipAddress: 'Luisenstr. 48',
      ShipRegion: 'CJ', ShipPostalCode: '44087', ShipCountry: 'Germany', Freight: 11.61, Verified: !1
    },
    {
      OrderID: 10250, CustomerID: 'HANAR', EmployeeID: 4, OrderDate: new Date(8367642e5),
      ShipName: 'Hanari Carnes', ShipCity: 'Rio de Janeiro', ShipAddress: 'Rua do Paço, 67',
      ShipRegion: 'RJ', ShipPostalCode: '05454-876', ShipCountry: 'Brazil', Freight: 65.83, Verified: !0
    }
  ];
}

Adding CSS Reference

Syncfusion Angular components come with a range of pre-built themes that are easily incorporated into your project. You can achieve this by importing the necessary CSS files directly from the ~/node_modules/@syncfusion package. Below, you will find the styles specific to the Grid component, which need to be added to your ~/src/styles.css file.

@import '../node_modules/@syncfusion/ej2-base/styles/material.css';
@import '../node_modules/@syncfusion/ej2-buttons/styles/material.css';
@import '../node_modules/@syncfusion/ej2-calendars/styles/material.css';
@import '../node_modules/@syncfusion/ej2-dropdowns/styles/material.css';
@import '../node_modules/@syncfusion/ej2-inputs/styles/material.css';
@import '../node_modules/@syncfusion/ej2-navigations/styles/material.css';
@import '../node_modules/@syncfusion/ej2-popups/styles/material.css';
@import '../node_modules/@syncfusion/ej2-splitbuttons/styles/material.css';
@import '../node_modules/@syncfusion/ej2-angular-grids/styles/material.css';

Run the Application

To run the application, navigate to the root directory and execute the following commands:

cd ..

dotnet run

output

NOTE

Access the Angular Sample integrated with ASP.NET Core on GitHub

See Also