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

Getting Started with Angular CLI

02 Dec 2022 / 5 minutes to read

Refer to the following steps to create Angular project with Syncfusion Angular UI Components (Essential JS 2).

Prerequisites

  • Angular : 6+
  • Typescript : 2.6+

Setting up an Angular Project

Using Angular CLI, you can easily setup angular projects. Install the Angular CLI tool globally in 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 creates 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.

Currently, Syncfusion provides two types of package structures for Angular components,

  1. Ivy library distribution package format
  2. Angular compatibility compiler (Angular’s legacy compilation and rendering pipeline) package.

Ivy library distribution package

By default, Syncfusion Angular packages(>=20.2.36) supports Angular Ivy distribution. The package are compatible with Angular version 12 and above. To install the package use the below command,

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

Copied to clipboard
npm install @syncfusion/ej2-angular-grids --save

Angular compatibility compiled package (ngcc)

For Angular version below 12, you can use the ngcc tagged packages of the Syncfusion Angular components. To install the package use the below command,

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

Copied to clipboard
npm install @syncfusion/ej2-angular-grids@ngcc --save

To mention the ngcc package in the package.json file, add the suffix -ngcc with the package version as below.

Copied to clipboard
@syncfusion/ej2-angular-grids:"20.2.38-ngcc"

If the ngcc tag is not specified while installing the package for Angular versions below 12, the Ivy package will be installed with warning.

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