syncfusion-angular-common

Syncfusion Angular コンポーネントの共通機能

Syncfusion Angular コンポーネントには、ユーザーエクスペリエンスを向上させ、異文化への対応を確保し、すべてのコンポーネントの基盤となる機能を提供する、包括的な共通ユーティリティと機能が含まれています。このスキルでは、堅牢な Angular アプリケーションを構築するためのインストール設定、アニメーション、グローバル化、状態管理、セキュリティに関する考慮事項を扱います。

目次

• ナビゲーションガイド
• クイックスタート
• 共通機能

ドキュメントとナビゲーションガイド

はじめにとフレームワークの設定

📄 参照: references/getting-started.md

• Angular CLI のインストールとプロジェクトの作成
• スタンドアロンコンポーネントとモジュールベースの設定
• ng add コマンドを使用した npm パッケージのインストール
• ASP.NET Core および ASP.NET MVC との統合
• コンポーネントの初期化
• クイックスタートの例

グローバル化

📄 参照: references/globalization.md

• アラビア語、ヘブライ語、ペルシャ語の右から左（RTL）サポート
• 多言語対応のためのローカライズ（l10n）
• CLDR データを使用した国際化（i18n）
• 数値と通貨の書式設定
• 日付と時刻の書式設定

高度な機能とユーティリティ

📄 参照: references/advanced-features.md

• アニメーション効果（FadeIn、ZoomOut、SlideUp など）
• アニメーションのタイミング（期間、遅延、グローバル設定）
• ドラッグ＆ドロップ操作（Draggable、Droppable）
• テンプレートのカスタマイズと最適化
• enablePersistence による状態の永続化
• セキュリティのベストプラクティスと HTML のサニタイズ

クイックスタート

Syncfusion Angular パッケージをインストールする

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

注: @syncfusion/ej2-base パッケージはすべての Syncfusion コンポーネントの依存関係であり、Syncfusion Angular パッケージをインストールすると自動的にインストールされます。package.json ファイルに明示的に追加する必要はありません。

テーマパッケージをインストールしてスタイルをインポートする

まず、必要な Tailwind 3 テーマパッケージをインストールします。次のコマンドを使用してください。

npm install @syncfusion/ej2-tailwind3-theme --save

次に、必要なスタイルをスタイルシートにインポートします。

@import "../node_modules/@syncfusion/ej2-tailwind3-theme/styles/grid/index.css";

ライセンスキーを登録する

ステップ 1: 環境変数を設定します。

# Windows
setx SYNCFUSION_LICENSE "Your_License_Key_Here"

# Mac/Linux
export SYNCFUSION_LICENSE='Your_License_Key_Here'

ステップ 2: NPX コマンドを使用してライセンスを有効化します。

npx syncfusion-license activate

注: ライセンス登録の別の方法については、Syncfusion のライセンスキー登録ドキュメントを参照してください。

基本的なコンポーネントの設定

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

共通機能

状態の永続化を有効にする

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

RTL サポートを有効にする

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

// Global RTL enablement
enableRtl(true);

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

アニメーション効果を追加する

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

ドラッグ＆ドロップを実装する

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