Getting Started with Angular CLI
17 Aug 202416 minutes to read
The Angular CLI is a command-line interface tool that allows developers to create, manage, and build Angular applications. This makes it easy to set up a new Angular project and get started with development.
In this guide, we will show you how to create an Angular project and install the Syncfusion Angular UI Components (Essential JS 2) to get started with development.
Prerequisites
System requirements for Syncfusion Angular UI components
Setting up an Angular project
Using Angular CLI, you can easily setup Angular projects. This section provides guidance for installing a specific version of Angular CLI and creating an Angular 18 application based on your requirements.
Installing a Specific Version
To install a specific version of Angular CLI, use the following command,
npm install -g @angular/cli@16.0.1
Installing the Latest Angular CLI
To create an Angular 18 application, use the Angular CLI with the following command
npm install -g @angular/cli
NOTE
For Angular 18, it default for generates a standalone application. Detailed instructions on creating Syncfusion Angular standalone components using the latest version, please refer to the Standalone guide.
Create a new application
Once the Angular CLI is installed, execute the following command to create a new project,
ng new syncfusion-angular-app
This command will prompt you for a few settings for the new project, such as whether to add Angular routing and which stylesheet format to use.
By default, it will create a CSS-based application. You can specify that you want to use SCSS by running the following command instead:
ng new syncfusion-angular-app --style=scss
Next, navigate to the created project folder:
cd syncfusion-angular-app
Installing Syncfusion Angular packages
Syncfusion packages are distributed in npm under the @syncfusion
scope. You can obtain all of the available Angular Syncfusion packages from npm.
Currently, Syncfusion provides two set of package structures for Angular components,
- Ivy library distribution package format
- Angular compatibility compiler (Angular’s legacy compilation and rendering pipeline) package.
Syncfusion’s latest Angular packages are Ivy-distributed and compatible with Angular 12 and above. To install the package use the following command,
ng add @syncfusion/ej2-angular-grids
If you are not using fully ivy compiler application, use the ngcc
tagged packages of the Syncfusion Angular components.
NOTE
The ngcc packages are still compatible with Angular CLI versions 15 and below. However, they may generate warnings suggesting the use of IVY compiled packages. Starting from Angular 16, support for the ngcc package has been completely removed. If you have further questions regarding ngcc compatibility, please refer to the following FAQ.
npm add @syncfusion/ej2-angular-grids@20.2.38-ngcc
The above command does the following configuration to your Angular app,
- Adds
@syncfusion/ej2-angular-grids
package and its peer dependencies to yourpackage.json
file. - Imports the
GridModule
in your application moduleapp.module.ts
. - Registers the Syncfusion UI default theme (material) in the
angular.json
file.
This makes it easy to add the Syncfusion Angular Grids module to your project and start using it in your application.
For more information about version compatibility, see version compatibility.
Adding Syncfusion Angular components
To use Syncfusion Angular components in your application, you will need to add them to your template and specify their properties in your component class.
In src/app/app.component.ts
, you can use column directives with the <ejs-grid>
selector and specify the e-column
elements inside the <ejs-grid>
element in the template for your component. The e-column
element allows you to define the properties of a column in the Grid, such as its field name, header text, and data type.
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
}
];
}
This will add a Grid to your application with the specified columns and data.
Run the application
Run the ng serve
command in the console, it will serve your application and you can open the browser window.
Refer the below sample for more information.
import { NgModule } from '@angular/core'
import { BrowserModule } from '@angular/platform-browser'
import { ButtonModule } from '@syncfusion/ej2-angular-buttons'
import { GridAllModule } from '@syncfusion/ej2-angular-grids'
import { enableRipple } from '@syncfusion/ej2-base';
import { Component } from '@angular/core';
// enable ripple effects
enableRipple(true);
@Component({
imports: [
ButtonModule,
GridAllModule
],
standalone: true,
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
}
];
}
import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));
Note: If you see a license banner when running your application, it means that you need to obtain a license key and register it within the application in order to use Syncfusion components. You can find more information on how to obtain and register a license key on our Licensing overview page.
You can also refer below video to get start Syncfusion Angular Grid component.
Syncfusion components-based styles
By default, the Material
theme is registered in the styles.css
file when you run the ng add
command. However, Syncfusion Angular components offer a range of built-in themes that you can easily add to your project by importing the relevant theme.
The default Material
theme includes styles for all Syncfusion Angular components. If you only want to use the styles for specific Syncfusion components, you can import only the required dependencies. For example, to use the styles for the Grid component alone, you can import the required dependencies as shown in the following snippet,
@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';
For information on using SCSS styles, see here.
Adding feature Modules to Syncfusion Angular components
Syncfusion Angular components offer module-based services and are easy to import and extend the functionalities of the components. If you want to enable features such as paging, filtering, and sorting in a Grid that has been rendered in your application, you will need to include the corresponding service modules in the providers
array of your modules.
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { GridModule } from '@syncfusion/ej2-angular-grids';
// Imports Grid services from Syncfusion Angular Grids
import { PageService, FilterService, SortService } from '@syncfusion/ej2-angular-grids';
import { AppComponent } from './app.component';
/**
* Module
*/
@NgModule({
imports: [
BrowserModule,
GridModule
],
declarations: [AppComponent],
bootstrap: [AppComponent],
// Add feature Service in the provider
providers: [PageService,
SortService,
FilterService]
})
export class AppModule { }
The component has several options set on the ejs-grid element, including allowPaging, allowSorting, and allowFiltering, which enable paging, sorting, and filtering features in the Grid, respectively. The pageSettings property is also set to specify the page size for the Grid. you can use the following code snippet in the app.component.ts file,
import { Component, OnInit } from '@angular/core';
import { data } from './datasource';
import {PageSettingsModel } from '@syncfusion/ej2-angular-grids';
@Component({
selector: 'app-root',
template: `<ejs-grid
[dataSource]='data'
[allowPaging]="true"
[allowSorting]="true"
[allowFiltering]="true"
[pageSettings]="pageSettings">
<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 implements OnInit {
public data: object[];
public pageSettings: PageSettingsModel;
ngOnInit(): void {
this.data = data;
// The pageSettings property is also set to specify the page size for the Grid
this.pageSettings = { pageSize: 6 };
}
}
import { NgModule } from '@angular/core'
import { BrowserModule } from '@angular/platform-browser'
import { GridModule } from '@syncfusion/ej2-angular-grids'
import { PageService, SortService, FilterService, GroupService } from '@syncfusion/ej2-angular-grids'
import { Component, OnInit } from '@angular/core';
import { data } from './datasource';
import {PageSettingsModel } from '@syncfusion/ej2-angular-grids';
@Component({
imports: [
GridModule
],
providers: [PageService,
SortService,
FilterService,
GroupService]
standalone: true,
selector: 'app-root',
template: `<ejs-grid [dataSource]='data' [allowPaging]="true" [allowSorting]="true"
[allowFiltering]="true" [pageSettings]="pageSettings">
<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 implements OnInit {
public data?: object[];
public pageSettings?: PageSettingsModel;
ngOnInit(): void {
this.data = data;
this.pageSettings = { pageSize: 6 };
}
}
import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));
By using the Syncfusion Angular Grid component, you can easily add a robust data Grid to your Angular application that supports paging and sorting of data. For more details refer Syncfusion Angular Grid.
Syncfusion Angular components showcase samples
Syncfusion has a collection of sample applications that demonstrate the use of Syncfusion Angular UI components.