Back to Details

syncfusion-angular-common

Compare original and translation side by side

🇺🇸

Original

English
🇨🇳

Translation

Chinese

Common Features in Syncfusion Angular Components

Syncfusion Angular组件的通用功能

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.
Syncfusion Angular组件包含全面的通用工具与功能，可增强用户体验、确保跨文化支持，并为所有组件提供基础能力。本技能涵盖安装设置、动画、全球化、状态管理以及构建稳健Angular应用的安全考量。

Table of Contents

目录

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
📄 阅读： references/getting-started.md
  • Angular CLI安装与项目创建
  • 独立组件 vs 基于模块的配置
  • 使用
    ng add
    命令安装npm包
  • ASP.NET Core与ASP.NET MVC集成
  • 组件初始化
  • 快速入门示例

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
📄 阅读： references/globalization.md
  • 阿拉伯语、希伯来语、波斯语的从右到左（RTL）支持
  • 多语言支持的本地化（l10n）
  • 搭配CLDR数据的国际化（i18n）
  • 数字与货币格式化
  • 日期与时间格式化

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
📄 阅读： references/advanced-features.md
  • 动画效果（淡入、缩小、上滑等）
  • 动画时序（时长、延迟、全局设置）
  • 拖拽交互（可拖拽、可放置）
  • 模板定制与优化
  • 启用enablePersistence的状态持久化
  • 安全最佳实践与HTML清理

Quick Start

快速入门

Install Syncfusion Angular Package

安装Syncfusion Angular包

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

Import Styles

导入样式

css
@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";
css
@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

注册许可证密钥

typescript
// src/main.ts
import { registerLicense } from '@syncfusion/ej2-base';

// Call this before initializing any Syncfusion components
registerLicense('Your license key here');
typescript
// src/main.ts
import { registerLicense } from '@syncfusion/ej2-base';

// 在初始化任何Syncfusion组件前调用此方法
registerLicense('Your license key here');

Basic Component Setup

基础组件设置

typescript
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 }
  ];
}
typescript
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

启用状态持久化

typescript
<ejs-grid 
  id="persistGrid"
  [dataSource]="data" 
  [enablePersistence]="true"
>
  <!-- Component content -->
</ejs-grid>
typescript
<ejs-grid 
  id="persistGrid"
  [dataSource]="data" 
  [enablePersistence]="true"
>
  <!-- 组件内容 -->
</ejs-grid>

Enable RTL Support

启用RTL支持

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

// Global RTL enablement
enableRtl(true);

// OR per-component
<ejs-grid [dataSource]="data" enableRtl="true"></ejs-grid>
typescript
import { enableRtl } from '@syncfusion/ej2-base';

// 全局启用RTL
enableRtl(true);

// 或按组件启用
<ejs-grid [dataSource]="data" enableRtl="true"></ejs-grid>

Add Animation Effects

添加动画效果

typescript
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' });
  }
}
typescript
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

实现拖拽功能

typescript
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);
      }
    });
  }
}
typescript
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);
      }
    });
  }
}