Getting Started with Angular Using Angular CLI and TypeScript

31 Jan 202516 minutes to read

This guide provides a step-by-step walkthrough for setting up an Angular project using TypeScript with Angular CLI, alongside integrating Syncfusion Angular components to enhance your application’s functionality.

The Angular CLI is a powerful command-line tool that simplifies the creation, management, and building of Angular applications, enabling a quick start to development.

Prerequisites

Ensure your development environment meets the System Requirements for Syncfusion Angular UI Components.

Set Up the Angular Application

A straightforward approach to beginning with Angular is to create a new application using the Angular CLI. Install Angular CLI globally with the following command:

npm install -g @angular/cli

From Angular 19 onwards, standalone applications are generated by default. To learn about creating Syncfusion Angular standalone components, please refer to the Standalone Guide.

Installing a Specific Version

To install a particular version of Angular CLI, use:

npm install -g @angular/[email protected]

Create a New Application

With Angular CLI installed, execute this command to generate a new application:

ng new syncfusion-angular-app

This command will prompt you to configure settings like enabling Angular routing and choosing a stylesheet format.

? Which stylesheet format would you like to use? (Use arrow keys)
> CSS             [ https://developer.mozilla.org/docs/Web/CSS                     ]
  Sass (SCSS)     [ https://sass-lang.com/documentation/syntax#scss                ]
  Sass (Indented) [ https://sass-lang.com/documentation/syntax#the-indented-syntax ]
  Less            [ http://lesscss.org                                             ]

By default, a CSS-based application is created. Use SCSS if required:

ng new syncfusion-angular-app --style=scss

Navigate to your newly created application directory:

cd syncfusion-angular-app

Adding Syncfusion Angular Packages

Syncfusion’s Angular component packages are available on npmjs.com. To use Syncfusion Angular components, install the necessary package.

This guide uses the Angular Grid Component for demonstration. Add the Angular Grid component with:

ng add @syncfusion/ej2-angular-grids

Syncfusion offers two package structures for Angular components:

  1. Ivy library distribution package format
  2. Angular compatibility compiler (ngcc), which is Angular’s legacy compilation pipeline.

Syncfusion’s latest Angular packages are provided as Ivy-compatible and suited for Angular 12 and above. To install the package, execute:

ng add @syncfusion/ej2-angular-grids

For applications not compiled with Ivy, use the ngcc tagged packages:

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/[email protected]

This command will perform the following configurations:

  • Add the @syncfusion/ej2-angular-grids package and peer dependencies to your package.json.
  • Import GridModule in your app.module.ts.
  • Register the default Syncfusion Material theme in angular.json.

For more details on version compatibility, refer to the Version Compatibility section.

Import Syncfusion CSS Styles

Syncfusion Angular component themes can be added in various ways: via CSS or SCSS styles from npm packages, CDN, CRG, or Theme Studio. See the themes topic for details on built-in themes and ways to reference them.

The Material theme is integrated within the styles.css upon running the ng add command by default.

To stylize only specific Syncfusion components, import the necessary styles. For example, to style only the Grid component:

@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';

Ensure that the import order aligns with the component’s dependency sequence.

For using SCSS styles, refer to this guide.

Adding Syncfusion Angular Components

To integrate the Syncfusion Grid component into your Angular application, follow these steps:

  1. Include the Component in Your Template:
    Incorporate the <ejs-grid> selector within your component template. Define its properties and specify columns using <e-columns> and <e-column> elements. These elements will enable customization of each column’s properties like 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
    }
  ];
}

3.This will display a Grid with specified columns and data in your application.

Run the application

To run your Angular application, execute the following command in your terminal:

ng serve

This command compiles your application and serves it through a development server. Once the command completes, open localhost:4200 in your web browser to view your running application.
The output of running your application appears as shown in these example files:

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 your application displays a license banner, it indicates that a license key is required to continue using Syncfusion components. Visit our Licensing Overview page to learn how to obtain and register your license key.

You can also watch the following video to quickly get started with the Syncfusion Angular Grid component:

Adding feature Modules to Syncfusion Angular components

Syncfusion Angular components utilize module-based services, allowing you to import and extend functionalities seamlessly. For instance, enabling features such as paging, filtering, and sorting in a Grid requires adding specific service modules to your module’s providers array.

To integrate these features, include the necessary imports and configure your AppModule as follows:

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 ejs-grid element within the component template has options such as allowPaging, allowSorting, and allowFiltering, which enable respective features in the Grid. Here’s how to configure it in app.component.ts:

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 utilizing the Syncfusion Angular Grid component, you can integrate a powerful data grid into your Angular application, supporting advanced features like paging and sorting. For additional details, refer to the Syncfusion Angular Grid documentation.

Syncfusion Angular Components Showcase Samples

Syncfusion offers a variety of sample applications that showcase the use of Angular UI components:

See Also