Search results

Getting Started ASP .Net Core with Angular

This document helps you to create a simple ASP .Net Core application with Angular Framework and Syncfusion Angular UI components.

Prerequisites

Before getting started with Syncfusion Angular Components in ASP.Net Core with Angular project, check whether the following are installed in the developer machine.

  • Angular Versions supported - 4+
  • Typescript Versions supported - 2.6+
  • .Net CLI 2.0+

Note: If the .Net CLI is not installed, refer to Getting Started for dotnet to install it.

Create an application

Create a new project with the following command using the command prompt.

You can also refer to SPA template to get started with .Net CLI template.

dotnet new angular -o my-new-app
cd my-new-app

Note: If you have ASP.NET Core 2.0, run the following command to install ASP.NET Core templates for Angular.

dotnet new --install Microsoft.DotNet.Web.Spa.ProjectTemplates::2.0.0

Now, you can create template project.

Installing Syncfusion button package

Move to the Client-App folder to install the Syncfusion package.

cd ClientApp
npm install

Syncfusion packages are distributed in npm as @syncfusion scoped packages. You can get all the angular Syncfusion packages from the npm link.

Add the @syncfusion/ej2-angular-buttons package to the application.

npm install @syncfusion/ej2-angular-buttons --save
(or)
npm I @syncfusion/ej2-angular-buttons --save

Adding button module

After installing the package, the component modules are available to configure into your application from Syncfusion installed package. Syncfusion Angular package provides two different types of ng-Modules.

Refer to Ng Module to learn about ngModules.

Refer to the following code snippet to import the button module in app.module.ts from the @syncfusion/ej2-angular-buttons.

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { HttpModule } from '@angular/http';

import { AppComponent } from './app.component';

// Imported Syncfusion button module from buttons package
import { ButtonModule } from '@syncfusion/ej2-angular-buttons';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    FormsModule,
    HttpModule,

    //Registering EJ2 button module
    ButtonModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

Adding Syncfusion component

Add the button component snippet in app.component.ts as follows.

@component({
selector: 'app-root',
template: `<h1>
    Hello Angular, Essential JS 2 Button!
 </h1>

 <button ejs-button cssClass=”e-primary”>Button</button>
 `
 })
export class AppComponent {
}

Adding CSS reference

Add button component styles as given in the angular-cli.json file within the apps -> styles section.

Note: If you are using Angular 6 project, add the changes in angular.json file.

{
"apps": [
    {
        "styles": [
                           "styles.css",./node_modules/@syncfusion/ej2/material.css”
                      ]
     }
   ]
}