Install the wrapper and runtime together
For Core, install @ace-grid/angular, @ace-grid/core, react, and react-dom. The Angular package is a binding over the shared Ace Grid runtime, not a separate native Angular grid engine. That tradeoff gives every framework the same grid behavior, but it should be visible in bundle and architecture reviews.
Import the tier-specific Angular component
Use @ace-grid/angular/core, @ace-grid/angular/pro, or @ace-grid/angular/enterprise. The subpath selects the runtime boundary explicitly, so a Core screen does not accidentally initialize paid features. Register AceGridComponent in a standalone component or NgModule like any other Angular dependency.
Pass Angular inputs, keep application state outside
Bind data, layout, and feature groups as component inputs. Keep API requests, permissions, route state, and authoritative saves in Angular services or stores. Test edited rows and callbacks with the same change-detection strategy used by the surrounding application.
Check the integration boundary before adopting
Prototype one custom cell, one edit, keyboard navigation, loading, and destroy/recreate behavior. Measure the production bundle with React dependencies included. If a React-backed runtime is unacceptable for the application, choose a native Angular grid rather than hiding that constraint until release.
Product evidence
Dedicated Angular host
@ace-grid/angular exposes the shared Ace Grid runtime through an Angular component while preserving the same rows, columns, feature props, and Core-to-Enterprise capability model.
Live Ace Grid example
Angular product grid preview
The shared Ace Grid runtime rendered as an editable, filterable application workflow.
Angular Ace Grid example
import { Component } from "@angular/core";
import { AceGridComponent } from "@ace-grid/angular/core";
@Component({
standalone: true,
selector: "app-customer-grid",
imports: [AceGridComponent],
template: `<ace-grid [data]="data" [layout]="layout" />`,
})
export class CustomerGridComponent {
readonly data = { rows, columns };
readonly layout = { width: 960, height: 520 };
}How to evaluate it
Limitations and tradeoffs
- Choose a native Angular grid when avoiding a React-backed runtime is an architectural requirement.
- Use a semantic Angular table for small, read-only datasets without grid interaction.
Common questions
Does Ace Grid have a dedicated Angular package?
Yes. @ace-grid/angular exposes the Ace Grid runtime through the Angular host while preserving the shared grid configuration model.