Angular
EditEdit This Document
Demos
Support
Forum
Upgrade Guide
FREE TRIAL
Search results

Getting Started with Angular CLI

24 Jun 2022 / 5 minutes to read

Refer to the following steps to use for Syncfusion Angular UI Components (Essential JS 2).

Prerequisites

To get started with Syncfusion Angular UI Components, ensure the compatible versions of Angular and Typescript.

  • Angular : 6+
  • Typescript : 2.6+

Getting Started with Angular CLI

Setting up an Angular Project

Angular provides the easiest way to set angular CLI projects using Angular CLI tool.

Install the CLI application globally to your machine.

Copied to clipboard
npm install -g @angular/cli

Create a New Application

Copied to clipboard
ng new syncfusion-angular-app

By default, it installs the CSS style base application. To setup with SCSS, pass —style=SCSS argument on create project.

Example code snippet.

Copied to clipboard
ng new syncfusion-angular-app --style=scss

Navigate to the created project folder.

Copied to clipboard
cd syncfusion-angular-app

Installing Syncfusion Grid Package

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

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

Copied to clipboard
npm install @syncfusion/ej2-angular-grids --save
(or)
npm i @syncfusion/ej2-angular-grids --save

Installing Syncfusion Grid Package with Custom Tag name

You can also change the tag name of Syncfusion Angular UI Controls.

Run the below command to add @syncfusion/ej2-angular-grids package to the application with the desired tag name custom.

Copied to clipboard
SET tagName=custom && npm install @syncfusion/ej2-angular-grids

After executing the above command, the Syncfusion Angular UI component selector will be changed. For example, the tag name of <ejs-grid> will be changed into <custom-grid>.

Adding Grid Module

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

Refer to Ng-Module to learn about ngModules.

Refer to the following snippet to import the grid module in app.module.ts from the @syncfusion/ej2-angular-grids.

Copied to clipboard
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';

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

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

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

// Registering EJ2 Grid Module
GridModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

Adding Syncfusion Component

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

Copied to clipboard
import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  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 AppComponent {
  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

Add button component styles in the src/style.css file as below.

Copied to clipboard
@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';

Adding SCSS Reference

To avoid SCSS compilation issues and to map the SCSS file path, add the stylePreprocessorOptions to the .angular-cli.json file.

Add the stylePreprocessorOptions option under apps in the angular.json file.

The following paths can be used globally in Angular app.

Copied to clipboard
"stylePreprocessorOptions": {
     "includePaths": [
     "node_modules/@syncfusion"
    ]
  },

Add button component styles in the src/style.scss file as below.

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

Running the Application

Run the ng serve command in the console, it will serve your application and you can open the browser window. The Output will appear as follows.

output

Refer the below sample for more information.

Source
Preview
app.component.ts
app.module.ts
main.ts
Copied to clipboard
import { enableRipple } from '@syncfusion/ej2-base';
import { Component } from '@angular/core';

// enable ripple effects
enableRipple(true);

@Component({
  selector: 'app-root',
  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 AppComponent {
  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
    }
  ];
}
Copied to clipboard
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { ButtonModule } from '@syncfusion/ej2-angular-buttons';
import { AppComponent } from './app.component';
import { GridAllModule } from '@syncfusion/ej2-angular-grids';

/**
 * Module
 */
@NgModule({
    imports: [
        BrowserModule,
        ButtonModule,
        GridAllModule
    ],
    declarations: [AppComponent],
    bootstrap: [AppComponent]
})
export class AppModule { }
Copied to clipboard
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { enableProdMode } from '@angular/core';
import { AppModule } from './app.module';

enableProdMode();
platformBrowserDynamic().bootstrapModule(AppModule);

See Also

Previous
Next