RevoGrid

Appearance

RevoGrid Angular Demo ​

A simple standalone Angular application demonstrating RevoGrid integration with dynamic routing.

Features ​

  • Standalone Angular components (no NgModules)
  • Dynamic routing with lazy-loaded components from /src/components
  • RevoGrid Pro integration
  • Multiple demo pages dynamically loaded from existing components:
    • Home: Basic grid with sample data (Name, Age, City, Email)
    • Pivot: Advanced pivot table functionality
    • Cell Flash: Cell flashing effects
    • Formula: Formula calculations
    • History: Undo/Redo functionality
    • Data Ref: Data reference and mapping
    • Export Excel: Excel export functionality
    • Event Manager: Event handling and management
    • Cell Merge: Cell merging functionality
    • Charts: Chart integration
    • Autofill: Autofill functionality
  • Clean, modern UI with Material theme
  • Responsive design
  • Navigation between pages

Getting Started ​

  1. Install dependencies:

    bash
    npm install

  2. Start the development server:

    bash
    npm run dev

  3. Open your browser and navigate to http://localhost:4200

Routes ​

  • / - Home page with basic RevoGrid demo
  • /pivot - Pivot table demo (dynamically loaded from /src/components/showcase-pivot/PivotShowcaseAngular.ts)
  • /cell-flash - Cell flash demo (dynamically loaded from /src/components/cell-flash/CellFlashAngular.ts)
  • /formula - Formula demo (dynamically loaded from /src/components/formula/FormulaAngular.ts)
  • /history - History demo (dynamically loaded from /src/components/history/HistoryAngular.ts)
  • /data-ref - Data reference demo (dynamically loaded from /src/components/data-ref/DataRefAngular.ts)
  • /export-excel - Export Excel demo (dynamically loaded from /src/components/export-excel/ExportExcelAngular.ts)
  • /event-manager - Event manager demo (dynamically loaded from /src/components/event-manager/EventManagerAngular.ts)
  • /cell-merge - Cell merge demo (dynamically loaded from /src/components/cell-merge/CellMergedAngular.ts)
  • /charts - Charts demo (dynamically loaded from /src/components/charts/ChartsAngular.ts)
  • /autofill - Autofill demo (dynamically loaded from /src/components/autofill/AutofillAngular.ts)
  • /simple-demo - Simple demo (local component demonstrating aliases)

Project Structure ​

  • src/app/app.ts - Main application component with routing
  • src/app/app.routes.ts - Route configuration with dynamic imports
  • src/app/pages/home/ - Home page component (static)
  • src/app/pages/dynamic/ - Dynamic component wrapper for loading components from /src/components
  • src/styles.scss - Global styles including RevoGrid CSS

TypeScript Path Aliases ​

The application uses TypeScript path aliases for cleaner imports:

  • @components/* - Maps to ../src/components/*
  • @src/* - Maps to ../src/*

This eliminates the need for long relative paths like ../../../../src/components/...

Example Usage ​

typescript
// Instead of:
import { Component } from '../../../../src/components/some-component/Component';

// You can use:
import { Component } from '@components/some-component/Component';

Dynamic Component Loading ​

The application uses a dynamic component wrapper that:

  1. Loads components from the /src/components directory using aliases
  2. Dynamically imports Angular components based on route parameters
  3. Provides consistent navigation and styling across all demo pages
  4. Allows easy addition of new demo pages by simply adding routes

Dependencies ​

  • Angular 20.3.0
  • RevoGrid Pro (local package)
  • Angular DataGrid wrapper

Available Scripts ​

  • npm run dev - Start development server
  • npm run build - Build for production
  • npm run watch - Build and watch for changes