Syncfusion Angular Common

Common Features in Syncfusion Angular Components

Syncfusion Angular components include comprehensive common utilities and features that enhance user experience, ensure cross-cultural support, and provide foundational capabilities across all components. This skill covers installation setup, animations, globalization, state management, and security considerations for building robust Angular applications.

Table of Contents

• Navigation Guide
• Quick Start
• Common Features

Documentation and Navigation Guide

Getting Started & Framework Setup

📄 Read: references/getting-started.md

• Angular CLI installation and project creation
• Standalone components vs. module-based configuration
• npm package installation with ng add command
• ASP.NET Core and ASP.NET MVC integration
• Component initialization
• Quick start examples

Globalization

📄 Read: references/globalization.md

• Right-to-left (RTL) support for Arabic, Hebrew, Persian languages
• Localization (l10n) for multi-language support
• Internationalization (i18n) with CLDR data
• Number and currency formatting
• Date and time formatting

Advanced Features & Utilities

📄 Read: references/advanced-features.md

• Animation effects (FadeIn, ZoomOut, SlideUp, etc.)
• Animation timing (duration, delay, global settings)
• Drag-and-drop interactions (Draggable, Droppable)
• Template customization and optimization
• State persistence with enablePersistence
• Security best practices and HTML sanitization

Quick Start

Install Syncfusion Angular Package

ng add @syncfusion/ej2-angular-grids@latest

Note: The @syncfusion/ej2-base package is a dependency for all Syncfusion components and will be automatically installed when you install any Syncfusion Angular package. You don't need to explicitly add it to your package.json file.

Import Styles

@import "../node_modules/@syncfusion/ej2-base/styles/tailwind3.css";
@import "../node_modules/@syncfusion/ej2-buttons/styles/tailwind3.css";
@import "../node_modules/@syncfusion/ej2-calendars/styles/tailwind3.css";
@import "../node_modules/@syncfusion/ej2-dropdowns/styles/tailwind3.css";
@import "../node_modules/@syncfusion/ej2-inputs/styles/tailwind3.css";
@import "../node_modules/@syncfusion/ej2-navigations/styles/tailwind3.css";
@import "../node_modules/@syncfusion/ej2-popups/styles/tailwind3.css";
@import "../node_modules/@syncfusion/ej2-angular-grids/styles/tailwind3.css";

Register License Key

Step 1: Set the environment variable:

# Windows
setx SYNCFUSION_LICENSE "Your_License_Key_Here"

# Mac/Linux
export SYNCFUSION_LICENSE='Your_License_Key_Here'

Step 2: Activate the license using NPX command:

npx syncfusion-license activate

Note: For alternative license registration methods, kindly refer to the Syncfusion license key registration documentation.

Basic Component Setup

import { Component } from '@angular/core';
import { GridModule, PageService } from '@syncfusion/ej2-angular-grids';

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [GridModule],
  providers: [PageService],
  template: `
    <ejs-grid [dataSource]="data" [allowPaging]="true">
      <e-columns>
        <e-column field="OrderID" width="100"></e-column>
        <e-column field="CustomerID" width="100"></e-column>
        <e-column field="Freight" width="100" format="C2"></e-column>
      </e-columns>
    </ejs-grid>
  `
})
export class AppComponent {
  data = [
    { OrderID: 10248, CustomerID: 'VINET', Freight: 32.38 },
    { OrderID: 10249, CustomerID: 'TOMSP', Freight: 11.61 }
  ];
}

Common Features

Enable State Persistence

<ejs-grid 
  id="persistGrid"
  [dataSource]="data" 
  [enablePersistence]="true"
>
  <!-- Component content -->
</ejs-grid>

Enable RTL Support

import { enableRtl } from '@syncfusion/ej2-base';

// Global RTL enablement
enableRtl(true);

// OR per-component
<ejs-grid [dataSource]="data" enableRtl="true"></ejs-grid>

Add Animation Effects

import { Component, ViewChild } from '@angular/core';
import { Animation } from '@syncfusion/ej2-base';

@Component({
  template: `<div #element class="box"></div>`
})
export class AnimationComponent {
  @ViewChild('element') element!: any;

  ngAfterViewInit() {
    const animation = new Animation({ duration: 5000, delay: 2000 });
    animation.animate(this.element.nativeElement, { name: 'FadeOut' });
  }
}

Implement Drag-and-Drop

import { Component, ViewChild } from '@angular/core';
import { Draggable, Droppable } from '@syncfusion/ej2-base';

@Component({
  template: `
    <div #draggable id="draggable">Drag me</div>
    <div #droppable id="droppable">Drop here</div>
  `
})
export class DragDropComponent {
  @ViewChild('draggable') draggable!: any;
  @ViewChild('droppable') droppable!: any;

  ngAfterViewInit() {
    new Draggable(this.draggable.nativeElement, { clone: false });
    
    new Droppable(this.droppable.nativeElement, {
      drop: (e) => {
        console.log('Dropped!', e.droppedElement);
      }
    });
  }
}

Advanced Features and Utilities

Table of Contents

• Animation Effects
• Animation Timing
• Global Animation Control
• Drag and Drop
• Draggable Configuration
• Droppable Configuration
• Template Customization
• State Persistence
• Security Best Practices

Animation Effects

The Animation utility creates smooth visual transitions for HTML elements. Syncfusion provides built-in animation effects that enhance user experience.

Available Animation Effects

• Fade: FadeIn, FadeOut, FadeZoomIn, FadeZoomOut
• Flip: FlipLeftDownIn, FlipLeftDownOut, FlipLeftUpIn, FlipLeftUpOut, FlipRightDownIn, FlipRightDownOut, FlipRightUpIn, FlipRightUpOut, FlipXDownIn, FlipXDownOut, FlipXUpIn, FlipXUpOut, FlipYLeftIn, FlipYLeftOut, FlipYRightIn, FlipYRightOut
• Slide: SlideBottomIn, SlideBottomOut, SlideDownIn, SlideDownOut, SlideLeftIn, SlideLeftOut, SlideRightIn, SlideRightOut, SlideTopIn, SlideTopOut, SlideUpIn, SlideUpOut
• Zoom: ZoomIn, ZoomOut
• None: Disables animation

Basic Animation Example

import { Component, ViewChild } from '@angular/core';
import { Animation } from '@syncfusion/ej2-base';

@Component({
  selector: 'app-animation',
  template: `
    <div id="container">
      <div #element1 style="width: 100px; height: 100px; background-color: #4CAF50;"></div>
      <div #element2 style="width: 100px; height: 100px; background-color: #2196F3;"></div>
    </div>
  `
})
export class AnimationComponent {
  @ViewChild('element1') element1!: any;
  @ViewChild('element2') element2!: any;

  ngAfterViewInit() {
    const animation = new Animation();
    
    // Apply FadeOut to element1
    if (this.element1) {
      animation.animate(this.element1.nativeElement, { name: 'FadeOut' });
    }
    
    // Apply ZoomOut to element2
    if (this.element2) {
      animation.animate(this.element2.nativeElement, { name: 'ZoomOut' });
    }
  }
}

Animation Timing

Control animation speed and timing with duration and delay properties:

• duration: Total time in milliseconds for animation to complete (default: 400ms)
• delay: Time in milliseconds before animation starts (default: 0ms)

import { Component, ViewChild } from '@angular/core';
import { Animation } from '@syncfusion/ej2-base';

@Component({
  selector: 'app-animation-timing',
  template: `
    <div id="container">
      <div #element1 style="width: 100px; height: 100px; background-color: #FF9800;"></div>
      <div #element2 style="width: 100px; height: 100px; background-color: #E91E63;"></div>
    </div>
  `
})
export class AnimationTimingComponent {
  @ViewChild('element1') element1!: any;
  @ViewChild('element2') element2!: any;

  ngAfterViewInit() {
    // Create animation with custom timing
    const animation = new Animation({ delay: 2000, duration: 5000 });
    
    if (this.element1) {
      animation.animate(this.element1.nativeElement, { name: 'FadeOut' });
    }
    
    if (this.element2) {
      animation.animate(this.element2.nativeElement, { name: 'ZoomOut' });
    }
  }
}

Global Animation Control

Control animations for all Syncfusion components globally:

import { GlobalAnimationMode, setGlobalAnimation } from "@syncfusion/ej2-base";

// Call in your application entry point before initializing components

// Enable animations globally (overrides component settings)
setGlobalAnimation(GlobalAnimationMode.Enable);

// Disable animations globally (overrides component settings)
setGlobalAnimation(GlobalAnimationMode.Disable);

// Use component's own animation settings (default)
setGlobalAnimation(GlobalAnimationMode.Default);

Note: The setGlobalAnimation method controls JavaScript-based animations through component APIs and the Animation library. It does not affect CSS-based animations or direct style-based animation properties.

Drag and Drop

Implement custom drag-and-drop interactions using Draggable and Droppable utilities from @syncfusion/ej2-base.

Draggable Utility

Transform any DOM element into a draggable item:

import { Component, ViewChild } from '@angular/core';
import { Draggable } from '@syncfusion/ej2-base';

@Component({
  selector: 'app-draggable',
  template: `
    <div id='container'>
      <div id='element' style="width: 100px; height: 100px; background-color: #4CAF50; cursor: move; padding: 10px;">
        <p>Draggable Element</p>
      </div>
    </div>
  `
})
export class DraggableComponent {
  ngAfterViewInit() {
    // Create draggable element
    const draggable = new Draggable(document.getElementById('element'), { clone: false });
  }
}

Draggable Configuration

Clone Option

Create a visual copy during drag operation:

const draggable = new Draggable(document.getElementById('element'), { clone: true });

When clone: true, the original element stays in place while a copy follows the cursor.

Drag Area Constraint

Restrict dragging to a specific region:

const draggable = new Draggable(document.getElementById('draggable'), { 
  clone: false, 
  dragArea: "#droppable"  // Restrict to #droppable container
});

Complete Draggable Example

import { Component } from '@angular/core';
import { Draggable } from '@syncfusion/ej2-base';

@Component({
  selector: 'app-draggable-config',
  template: `
    <div id='container'>
      <div id='droppable' style="border: 2px dashed #ccc; padding: 20px; min-height: 200px;">
        <p>Drag Area</p>
      </div>
      <div id='draggable' style="width: 100px; height: 100px; background-color: #4CAF50; cursor: move; margin-top: 10px;">
        <p id='drag'>Draggable Element</p>
      </div>
    </div>
  `
})
export class DraggableConfigComponent {
  ngAfterViewInit() {
    // Draggable with clone and drag area constraints
    const draggable = new Draggable(document.getElementById('draggable'), { 
      clone: false, 
      dragArea: "#droppable" 
    });
  }
}

Droppable Configuration

A droppable zone accepts and responds to draggable elements:

import { Component, ViewChild } from '@angular/core';
import { Draggable, Droppable, DropEventArgs } from '@syncfusion/ej2-base';

@Component({
  selector: 'app-drag-drop',
  template: `
    <div id='container'>
      <div id='droppable' style="border: 2px solid #2196F3; padding: 20px; min-height: 200px; background-color: #E3F2FD;">
        <p>Drop Zone</p>
      </div>
      <div id='draggable' style="width: 100px; height: 100px; background-color: #4CAF50; cursor: move; margin-top: 10px;">
        <p id='drag'>Draggable</p>
      </div>
    </div>
  `
})
export class DragDropComponent {
  ngAfterViewInit() {
    const draggable = new Draggable(document.getElementById('draggable'), { clone: false });
    
    const droppable = new Droppable(document.getElementById('droppable'), {
      drop: (e: DropEventArgs) => {
        // Handle drop event
        e.droppedElement.querySelector('#drag').textContent = 'Dropped Successfully!';
        console.log('Dropped element:', e.droppedElement);
        console.log('Target:', e.target);
      }
    });
  }
}

Template Customization

ng-template Usage

Templates allow customizing component layouts with Angular templates:

import { Component } from '@angular/core';
import { GridModule } from '@syncfusion/ej2-angular-grids';
import { ButtonModule } from '@syncfusion/ej2-angular-buttons';
import { CommonModule } from '@angular/common';

@Component({
  selector: 'app-grid-template',
  standalone: true,
  imports: [GridModule, ButtonModule, CommonModule],
  template: `
    <ejs-grid [dataSource]="data">
      <e-columns>
        <e-column field="OrderID" width="100"></e-column>
        <e-column field="CustomerID" width="100"></e-column>
        <e-column field="ShipCountry" width="100">
          <ng-template #template let-data>
            <div class="custom">
              <button ejs-button>{{ data.ShipCountry }}</button>
            </div>
          </ng-template>
        </e-column>
      </e-columns>
    </ejs-grid>
  `
})
export class GridTemplateComponent {
  data = [
    { OrderID: 10248, CustomerID: 'VINET', ShipCountry: 'France' },
    { OrderID: 10249, CustomerID: 'TOMSP', ShipCountry: 'Germany' },
    { OrderID: 10250, CustomerID: 'HANAR', ShipCountry: 'Brazil' }
  ];
}

State Persistence

Automatically persist component state to browser localStorage across page refreshes:

import { Component } from '@angular/core';
import { GridModule } from '@syncfusion/ej2-angular-grids';

@Component({
  selector: 'app-persistent-grid',
  standalone: true,
  imports: [GridModule],
  template: `
    <ejs-grid 
      [dataSource]="data"
      [enablePersistence]="true"
      [allowPaging]="true"
      [pageSettings]="pageSettings"
    >
      <!-- Grid content -->
    </ejs-grid>
  `
})
export class PersistentGridComponent {
  data = [
    { OrderID: 10248, CustomerID: 'VINET', EmployeeID: 5, ShipCountry: 'France', Freight: 32.38 }
  ];
  
  pageSettings = { pageSize: 6 };
}

Managing Persisted Data

// Clear persisted state for a component
localStorage.removeItem('grid-state-key');

// Disable persistence
<ejs-grid [enablePersistence]="false" ... />

Security Best Practices

When working with Syncfusion Angular components, follow secure coding practices to protect your application and user data.

Note: For comprehensive security guidelines and best practices, please refer to the Syncfusion Security Documentation.

Getting Started with Syncfusion Angular

Table of Contents

• Angular CLI Setup
• Standalone Components
• ASP.NET Core Integration
• ASP.NET MVC Integration

Angular CLI Setup

Create a New Angular Application

Start by creating a new Angular project using the Angular CLI command:

Install Syncfusion Package

Syncfusion Angular component packages are available on npmjs.com. Use the ng add command to install a Syncfusion package. The command automatically configures:

• Package installation in package.json
• Module imports in your application
• Theme CSS in angular.json
• Build configuration

Example: Installing the Grid component

ng add @syncfusion/ej2-angular-grids@latest

Example: Installing multiple components

ng add @syncfusion/ej2-angular-buttons@latest
ng add @syncfusion/ej2-angular-calendars@latest
ng add @syncfusion/ej2-angular-dropdowns@latest

Import CSS

Syncfusion Angular component themes can be added in various ways: via CSS or SCSS styles from npm packages, CDN, or Theme Studio.

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/material3.css';
@import '../node_modules/@syncfusion/ej2-buttons/styles/material3.css';
@import '../node_modules/@syncfusion/ej2-calendars/styles/material3.css';
@import '../node_modules/@syncfusion/ej2-dropdowns/styles/material3.css';
@import '../node_modules/@syncfusion/ej2-inputs/styles/material3.css';
@import '../node_modules/@syncfusion/ej2-navigations/styles/material3.css';
@import '../node_modules/@syncfusion/ej2-popups/styles/material3.css';
@import '../node_modules/@syncfusion/ej2-splitbuttons/styles/material3.css';
@import '../node_modules/@syncfusion/ej2-angular-grids/styles/material3.css';

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

Adding Syncfusion Components

To integrate the Syncfusion Grid component into your Angular application, add the <ejs-grid> selector within your component template:

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
    },
    {
      OrderID: 10249, CustomerID: 'TOMSP', EmployeeID: 6, OrderDate: new Date(836505e6),
      ShipName: 'Toms Spezialitäten', ShipCity: 'Münster', ShipAddress: 'Luisenstr. 48',
      ShipRegion: 'CA', ShipPostalCode: '44087', ShipCountry: 'Germany', Freight: 11.61
    }
  ];
}

Standalone Components

Standalone components are the modern approach in Angular and don't require NgModule configuration. Syncfusion components work seamlessly with standalone components.

Create a New Angular Application

First, create a new Angular project using the Angular CLI command.

Install Syncfusion Package

Syncfusion's Angular packages are available on npm under the @syncfusion scope. To add the latest Syncfusion Angular packages, execute:

ng add @syncfusion/ej2-angular-grids@latest

This command performs the following configurations:

• Adds the @syncfusion/ej2-angular-grids package and its dependencies to package.json
• Imports GridModule into your application's default standalone component
• Registers Syncfusion's default Material theme in angular.json

Import CSS

The following CSS styles are available in the ../node_modules/@syncfusion folder. Reference them in src/styles.css:

@import '../node_modules/@syncfusion/ej2-base/styles/material3.css';
@import '../node_modules/@syncfusion/ej2-buttons/styles/material3.css';
@import '../node_modules/@syncfusion/ej2-calendars/styles/material3.css';
@import '../node_modules/@syncfusion/ej2-dropdowns/styles/material3.css';
@import '../node_modules/@syncfusion/ej2-inputs/styles/material3.css';
@import '../node_modules/@syncfusion/ej2-navigations/styles/material3.css';
@import '../node_modules/@syncfusion/ej2-popups/styles/material3.css';
@import '../node_modules/@syncfusion/ej2-splitbuttons/styles/material3.css';
@import '../node_modules/@syncfusion/ej2-notifications/styles/material3.css';
@import '../node_modules/@syncfusion/ej2-angular-grids/styles/material3.css';

Adding Syncfusion Components

In standalone components, you directly import the required modules in the component file. Modify your src/app/app.ts file to incorporate the Syncfusion Grid component:

import { Component } from '@angular/core';
import { GridModule } from '@syncfusion/ej2-angular-grids';

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [GridModule],
  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>
  `,
  styleUrls: ['./app.css']
})
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
    },
    {
      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
    }
  ];
}

The imports array in the @Component decorator specifies the required Syncfusion modules. Each component you want to use must be explicitly imported and included in this array.

ASP.NET Core Integration

Project Setup

Create an ASP.NET Core project with Angular frontend:

dotnet new angular -n SyncfusionApp
cd SyncfusionApp

Navigate to the client app folder:

cd ClientApp

Install Syncfusion Package

Install Syncfusion Angular packages from npm:

npm install @syncfusion/ej2-angular-grids@latest --save

All Syncfusion Angular packages are available under the @syncfusion scope at npmjs.com.

Register GridModule in main.ts

In ~/ClientApp/src/main.ts, import and register the Grid module with standalone bootstrap:

import { bootstrapApplication } from '@angular/platform-browser';
import { appConfig } from './app/app.config';
import { AppComponent } from './app/app';
import { importProvidersFrom } from '@angular/core';
import { GridModule } from '@syncfusion/ej2-angular-grids';

bootstrapApplication(AppComponent, {
  providers: [
    importProvidersFrom(GridModule),
    ...appConfig.providers
  ]
}).catch((err) => console.error(err));

Import CSS

Add the required CSS files to style your Syncfusion components. Open the ~/ClientApp/src/styles.css file and add the following CSS imports:

@import '../node_modules/@syncfusion/ej2-base/styles/material3.css';
@import '../node_modules/@syncfusion/ej2-buttons/styles/material3.css';
@import '../node_modules/@syncfusion/ej2-calendars/styles/material3.css';
@import '../node_modules/@syncfusion/ej2-dropdowns/styles/material3.css';
@import '../node_modules/@syncfusion/ej2-inputs/styles/material3.css';
@import '../node_modules/@syncfusion/ej2-navigations/styles/material3.css';
@import '../node_modules/@syncfusion/ej2-popups/styles/material3.css';
@import '../node_modules/@syncfusion/ej2-splitbuttons/styles/material3.css';
@import '../node_modules/@syncfusion/ej2-angular-grids/styles/material3.css';

These imports provide the Material theme styling for various UI components. The imports should be in this specific order to ensure proper styling.

Adding Syncfusion Components

In ~/ClientApp/src/app/home/home.ts, add the Syncfusion Grid component:

import { Component } from '@angular/core';
import { GridModule } from '@syncfusion/ej2-angular-grids';
import { CommonModule } from '@angular/common';

@Component({
  selector: 'app-home',
  standalone: true,
  imports: [GridModule, CommonModule],
  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 HomeComponent {
  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
    },
    {
      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
    }
  ];
}

Run your application with dotnet run and navigate to the application URL to see the Syncfusion Grid integrated with ASP.NET Core.

ASP.NET MVC Integration

Project Setup

Create an ASP.NET MVC Web Application using Visual Studio, then integrate an Angular CLI project as the frontend.

1. Open Developer Command Prompt from Visual Studio 2. Navigate to your MVC project root directory 3. Create an Angular CLI application:

ng new ClientApp
cd ClientApp

Install Syncfusion Package

Install Syncfusion Angular components by following the Angular CLI installation steps. Inside the ClientApp directory, run:

ng add @syncfusion/ej2-angular-grids@latest

Update projects.ClientApp.architect.build.options.outputPath in angular.json for the production build to ../Scripts/ClientApp:

"projects": {
  "ClientApp": {
    "architect": {
      "build": {
        "options": {
          "outputPath": "../Scripts/ClientApp"
        }
      }
    }
  }
}

Import CSS

Add the required CSS files in ~/ClientApp/src/styles.css:

@import '../node_modules/@syncfusion/ej2-base/styles/material3.css';
@import '../node_modules/@syncfusion/ej2-buttons/styles/material3.css';
@import '../node_modules/@syncfusion/ej2-calendars/styles/material3.css';
@import '../node_modules/@syncfusion/ej2-dropdowns/styles/material3.css';
@import '../node_modules/@syncfusion/ej2-inputs/styles/material3.css';
@import '../node_modules/@syncfusion/ej2-navigations/styles/material3.css';
@import '../node_modules/@syncfusion/ej2-popups/styles/material3.css';
@import '../node_modules/@syncfusion/ej2-splitbuttons/styles/material3.css';
@import '../node_modules/@syncfusion/ej2-angular-grids/styles/material3.css';

Adding Syncfusion Components

Create or modify your Angular component to include the Syncfusion Grid. In your ~/ClientApp/src/app/app.ts:

import { Component } from '@angular/core';
import { GridModule } from '@syncfusion/ej2-angular-grids';

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [GridModule],
  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-columns>
    </ejs-grid>
  `
})
export class AppComponent {
  public data: Object[] = [
    { OrderID: 10248, CustomerID: 'VINET', Freight: 32.38 },
    { OrderID: 10249, CustomerID: 'TOMSP', Freight: 11.61 }
  ];
}

Automate Angular Build with MS Build

Append the following to your .csproj file to automate the Angular build process:

<PropertyGroup>
    <TypeScriptCompileBlocked>true</TypeScriptCompileBlocked>
    <TypeScriptToolsVersion>Latest</TypeScriptToolsVersion>
    <IsPackable>false</IsPackable>
    <SpaRoot>ClientApp\</SpaRoot>
    <DefaultItemExcludes>$(DefaultItemExcludes);$(SpaRoot)node_modules\**</DefaultItemExcludes>
</PropertyGroup>

<ItemGroup>
    <Content Remove="$(SpaRoot)**" />
    <None Remove="$(SpaRoot)**" />
    <None Include="$(SpaRoot)**" Exclude="$(SpaRoot)node_modules\**" />
</ItemGroup>

<Target Name="BeforeBuild" AfterTargets="ComputeFilesToPublish">
    <Exec WorkingDirectory="$(SpaRoot)" Command="npm install" />
    <Exec WorkingDirectory="$(SpaRoot)" Command="npm run build -- --configuration production --base-href /" />
    <ItemGroup>
        <DistFiles Include="$(SpaRoot)dist\**" />
        <ResolvedFileToPublish Include="@(DistFiles->'%(FullPath)')" Exclude="@(ResolvedFileToPublish)">
            <RelativePath>%(DistFiles.Identity)</RelativePath>
            <CopyToPublishDirectory>PreserveNewest</CopyToPublishDirectory>
            <ExcludeFromSingleFile>true</ExcludeFromSingleFile>
        </ResolvedFileToPublish>
    </ItemGroup>
</Target>

Configure MVC Bundle and Layout

Edit the App_Start\BundleConfig.cs file to include Angular production scripts:

bundles.Add(new Bundle("~/bundles/clientapp").Include(
    "~/Scripts/ClientApp/runtime.*",
    "~/Scripts/ClientApp/polyfills.*",
    "~/Scripts/ClientApp/main.*"));

bundles.Add(new StyleBundle("~/Content/clientapp").Include(
    "~/Scripts/ClientApp/styles.*"));

In ~/Views/Shared/_Layout.cshtml, add the bundle references:

<!DOCTYPE html>
<html>
<head>
    @Styles.Render("~/Content/css")
    @Styles.Render("~/Content/clientapp")
</head>
<body>
    @RenderBody()
    
    @Scripts.Render("~/bundles/jquery")
    @Scripts.Render("~/bundles/bootstrap")
    @Scripts.Render("~/bundles/clientapp")
    @RenderSection("scripts", required: false)
</body>
</html>

Add the <app-root> tag in your view file (e.g., ~/Views/Home/Index.cshtml):

<app-root></app-root>

Build and run your ASP.NET MVC application from Visual Studio to see the integrated Syncfusion Grid component.

Globalization

Table of Contents

• Right-to-Left Support
• Localization (l10n)
• Internationalization (i18n)

Right-to-Left Support

Right-to-Left (RTL) support enables applications to display content correctly for languages written from right to left, such as Arabic, Hebrew, Persian, and Urdu.

Global RTL Enablement

Enable RTL for all Syncfusion components in your application:

// In main.ts
import { enableRtl } from '@syncfusion/ej2-base';
import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app/app.component';

enableRtl(true);

bootstrapApplication(AppComponent).catch((err) => console.error(err));

Per-Component RTL

Enable RTL only for specific components:

import { Component } from '@angular/core';
import { ListViewModule } from '@syncfusion/ej2-angular-lists';

@Component({
  selector: 'app-rtl-list',
  standalone: true,
  imports: [ListViewModule],
  template: `
    <ejs-listview 
      [dataSource]="data" 
      [fields]="fields" 
      enableRtl="true"
      headerTitle="قائمة"
    >
    </ejs-listview>
  `
})
export class RtlListComponent {
  public data: Object[] = [
    { id: 1, text: 'أحمد' },
    { id: 2, text: 'فاطمة' },
    { id: 3, text: 'محمد' }
  ];
  
  public fields: Object = { text: 'text' };
}

RTL with Localization

Combine RTL with proper language settings:

import { L10n, setCulture, enableRtl } from '@syncfusion/ej2-base';

// Load locale resources
L10n.load({
  'ar': {
    'Button': {
      'id': 'معرف',
      'date': 'تاريخ'
    }
  }
});

// Set culture
setCulture('ar');

// Enable RTL
enableRtl(true);

Localization (l10n)

Loading Translations

Load translation strings for different languages:

import { L10n } from '@syncfusion/ej2-base';

L10n.load({
  'en': {
    'Button': {
      'id': 'ID',
      'text': 'Submit'
    }
  },
  'fr': {
    'Button': {
      'id': 'Identifiant',
      'text': 'Soumettre'
    }
  },
  'ar': {
    'Button': {
      'id': 'معرف',
      'text': 'إرسال'
    }
  }
});

Using Localized Strings

In component templates:

import { Component } from '@angular/core';
import { GridModule } from '@syncfusion/ej2-angular-grids';

@Component({
  selector: 'app-localized-grid',
  standalone: true,
  imports: [GridModule],
  template: `
    <ejs-grid [dataSource]="data">
      <e-columns>
        <e-column field="id" headerText="ID" width=90></e-column>
        <e-column field="name" headerText="Name" width=120></e-column>
      </e-columns>
    </ejs-grid>
  `
})
export class LocalizedGridComponent {
  data = [
    { id: 1, name: 'Product A' },
    { id: 2, name: 'Product B' }
  ];
}

Culture & Language Switching

Setting Global Culture

import { setCulture } from '@syncfusion/ej2-base';

// Switch to French
setCulture('fr-FR');

// Switch to Arabic
setCulture('ar-SA');

// Switch to German
setCulture('de-DE');

Runtime Culture Switching

import { Component } from '@angular/core';
import { setCulture } from '@syncfusion/ej2-base';

@Component({
  selector: 'app-culture-switcher',
  template: `
    <div>
      <select (change)="changeCulture($event)">
        <option value="en-US">English</option>
        <option value="fr-FR">Français</option>
        <option value="de-DE">Deutsch</option>
        <option value="ar-SA">العربية</option>
      </select>
      <p>Current Culture: {{ currentCulture }}</p>
    </div>
  `
})
export class CultureSwitcherComponent {
  currentCulture = 'en-US';

  changeCulture(event: any) {
    const culture = event.target.value;
    setCulture(culture);
    this.currentCulture = culture;
  }
}

Internationalization (i18n)

Internationalization (i18n) enables formatting numbers, dates, and currencies according to different cultures.

CLDR Data Installation

Install the CLDR data package:

npm install @syncfusion/ej2-cldr-data@latest

Loading CLDR Data

import { loadCldr } from '@syncfusion/ej2-base';
import enNumberData from '@syncfusion/ej2-cldr-data/main/en/numbers.json';
import enTimeZoneData from '@syncfusion/ej2-cldr-data/main/en/timeZoneNames.json';

loadCldr(enNumberData, enTimeZoneData);

Multiple Culture Setup

import { loadCldr } from '@syncfusion/ej2-base';
import enData from '@syncfusion/ej2-cldr-data/main/en/all.json';
import frData from '@syncfusion/ej2-cldr-data/main/fr/all.json';
import arData from '@syncfusion/ej2-cldr-data/main/ar/all.json';
import numbersData from '@syncfusion/ej2-cldr-data/supplemental/numberingSystems.json';

loadCldr(enData, frData, arData, numbersData);

Number Formatting

Basic Number Formatting

import { Component } from '@angular/core';
import { formatNumber } from '@syncfusion/ej2-base';

@Component({
  selector: 'app-number-format',
  template: `<p>{{ formattedNumber }}</p>`
})
export class NumberFormatComponent {
  formattedNumber: string;

  ngOnInit() {
    // Format as currency
    this.formattedNumber = formatNumber(1234.56, { format: 'C2' });
    // Output: $1,234.56 (in en-US)
  }
}

Number Format Types

Custom Number Formats

import { formatNumber } from '@syncfusion/ej2-base';

// Define minimum and maximum decimal digits
const options = {
  minimumFractionDigits: 2,
  maximumFractionDigits: 2,
  useGrouping: true
};

const formatted = formatNumber(1234567.89, options);
// Output: 1,234,567.89

Currency Formatting

import { formatNumber, setCurrencyCode } from '@syncfusion/ej2-base';

// Set global currency
setCurrencyCode('EUR');

const amount = formatNumber(1234.56, { format: 'C2' });
// Output: €1,234.56 (in compatible locales)

Date & Time Formatting

Basic Date Formatting

import { Component } from '@angular/core';
import { formatDate } from '@syncfusion/ej2-base';

@Component({
  selector: 'app-date-format',
  template: `<p>{{ formattedDate }}</p>`
})
export class DateFormatComponent {
  formattedDate: string;

  ngOnInit() {
    const date = new Date(2024, 2, 20); // March 20, 2024
    
    // Format with skeleton
    this.formattedDate = formatDate(date, { type: 'date', skeleton: 'long' });
    // Output: March 20, 2024 (in en-US)
  }
}

Date Format Skeletons

Time Format Skeletons

import { formatDate } from '@syncfusion/ej2-base';

const now = new Date();

// Short time
const shortTime = formatDate(now, { type: 'time', skeleton: 'short' });
// Output: 2:45 PM

// Medium time
const mediumTime = formatDate(now, { type: 'time', skeleton: 'medium' });
// Output: 2:45:30 PM

// Long time
const longTime = formatDate(now, { type: 'time', skeleton: 'long' });
// Output: 2:45:30 PM GMT+5

DateTime Formatting

import { formatDate } from '@syncfusion/ej2-base';

const date = new Date(2024, 2, 20, 14, 30, 0);

// Short datetime
const shortDt = formatDate(date, { type: 'dateTime', skeleton: 'short' });
// Output: 3/20/24, 2:30 PM

// Long datetime
const longDt = formatDate(date, { type: 'dateTime', skeleton: 'long' });
// Output: March 20, 2024 at 2:30:00 PM GMT+5

Custom Date Formats

import { formatDate } from '@syncfusion/ej2-base';

// Custom format pattern
const customFormat = formatDate(new Date(), { 
  format: "'Date:' dd/MM/yyyy 'Time:' HH:mm:ss" 
});
// Output: Date: 20/03/2024 Time: 14:30:00