RevoGrid

Appearance

Angular Data Grid ​

RevoGrid shines in Angular when you want a high-performance grid without giving up framework-native templates and editors. The Angular wrapper keeps the grid convenient to use while still exposing the same core RevoGrid API.

Edit RG Cell (Angular Standalone)

INFO

This tutorial assumes that an Angular project already exists. If not, start with the official Angular installation guide.

Install your Angular Data Grid ​

Install RevoGrid for Angular using the following command:

npm
npm i @revolist/angular-datagrid
pnpm
pnpm add @revolist/angular-datagrid
yarn
yarn add @revolist/angular-datagrid
bun
bun add @revolist/angular-datagrid

Standalone component setup ​

ts
import { Component } from '@angular/core';
import { RevoGrid } from '@revolist/angular-datagrid';

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [RevoGrid],
  template: `<revo-grid
    style="height: 220px; width: 100%"
    [columns]="columns"
    [source]="source"
  ></revo-grid>`,
})
export class AppComponent {
  source = [
    { name: 'Item 1', details: 'First row' },
    { name: 'Item 2', details: 'Second row' },
  ];

  columns = [
    { prop: 'name', name: 'Name' },
    { prop: 'details', name: 'Details' },
  ];
}

Module-based setup ​

If your Angular app still uses modules, RevoGrid can be imported there as well:

ts
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { RevoGrid } from '@revolist/angular-datagrid';
import { AppComponent } from './app.component';

@NgModule({
  declarations: [AppComponent],
  imports: [BrowserModule, RevoGrid],
  bootstrap: [AppComponent],
})
export class AppModule {}
ts
import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  template: `<revo-grid [source]="source" [columns]="columns"></revo-grid>`,
})
export class AppComponent {
  source = [
    { name: 'Item 1', details: 'First row' },
    { name: 'Item 2', details: 'Second row' },
  ];

  columns = [
    { prop: 'name', name: 'Name' },
    { prop: 'details', name: 'Details' },
  ];
}

Dynamic Component Usage

When using RevoGrid with Angular 19+, there are known edge cases with dynamically loading or using the component in certain scenarios. The grid frame may render, but columns and source data may not display properly.

Known Symptoms:

  • Columns and source data might not render when the component is used dynamically.
  • Plugins and readonly properties may stop working in some dynamic scenarios.
  • Silent errors might occur without any visible error messages.

Related GitHub Discussion: GitHub Discussion #798

Helpful Resources:

If you encounter issues with dynamic component usage, please report them on GitHub Issues with details about your Angular version and setup.

Accessing grid instance methods ​

When you need to call public methods such as scrollToRow, setCellEdit, or getVisibleSource, grab the underlying element and call the API on that instance.

Custom renderers and editors ​

Use these Angular-specific guides for deeper integration:

Event handling ​

Angular applications typically listen to the same RevoGrid lifecycle events as other integrations:

  • beforeedit
  • afteredit
  • beforefilterapply
  • beforesourceset

Edit RG Start (Angular Module)

Check out our Angular Data Grid examples ​