Set up your project

Requirements

• Angular 22 or 23 — components use signal inputs, the new control flow and Signal Forms interop.
• Node.js 22.22+ — the minimum the Angular CLI itself requires.
• Standalone and zoneless applications are fully supported; there is no dependency on zone.js or NgModules.

Install the packages

Packages are independent — pick the families you need. Shared engines (@oge-ui/core for data processing, @oge-ui/overlay for popup positioning) are declared as dependencies and install automatically.

# everything at once — one install, one import path
npm install oge-ui

# …or install only what you use — every package is standalone
npm install @oge-ui/grid        # data grid (+ @oge-ui/core)
npm install @oge-ui/tree-list   # hierarchical grid
npm install @oge-ui/pivot       # pivot table
npm install @oge-ui/buttons     # buttons, groups, drop-downs (+ @oge-ui/overlay)
npm install @oge-ui/inputs      # text, textarea, number and select editors

ng add

Every package ships an ng add schematic. It installs the package, optionally registers a theme stylesheet, and writes a short usage block into your AGENTS.md so AI coding assistants working in the repo reach for OGE — and read the API reference that ships in node_modules instead of guessing.

# installs the package and wires the optional extras
ng add @oge-ui/grid

# with the dark theme registered in angular.json
ng add @oge-ui/grid --theme=dark

# without touching AGENTS.md
ng add @oge-ui/inputs --skip-agents-file

• --theme — dark, high-contrast, tailwind or bootstrap. Omit it for the default light theme, which is built into the components.
• --skip-agents-file — leave AGENTS.md alone.
• --project — which workspace project to configure, when the workspace has more than one application.

The block is written between <!-- oge-ui:start --> markers and regenerated from the OGE packages in your package.json, so adding a second family grows the table instead of duplicating it. Everything outside the markers is left untouched.

Optional dependencies

Export features live in secondary entry points so their libraries stay out of your bundle until you use them. Install the peer only when you import the matching entry:

# Excel export (grid, tree list, pivot, gantt export-excel entries)
npm install exceljs

# PDF export (grid export-pdf needs both; gantt export-pdf only jspdf)
npm install jspdf jspdf-autotable

• @oge-ui/grid/export-excel, @oge-ui/tree-list/export-excel, @oge-ui/pivot/export-excel and @oge-ui/gantt/export-excel require exceljs.
• @oge-ui/grid/export-pdf requires jspdf and jspdf-autotable; @oge-ui/gantt/export-pdf requires jspdf.
• CSV export and the Gantt PNG export (@oge-ui/gantt/export-image) are built in — no extra dependency.

Application providers

Every package ships a provideOge…Config() function for application-wide defaults — sizing, timings and all user-facing strings. This step is optional: without providers, components use their built-in defaults. See Localization for the full message catalogs.

import { ApplicationConfig } from '@angular/core';
import { provideOgeGridConfig } from '@oge-ui/grid';
import { provideOgeInputsConfig } from '@oge-ui/inputs';

export const appConfig: ApplicationConfig = {
  providers: [
    // optional — components work with sensible defaults out of the box
    provideOgeGridConfig({ rowHeight: 32, allowUnsorting: false }),
    provideOgeInputsConfig({ spinRepeatDelayMs: 300 }),
  ],
};

Verify the setup

Drop a component into your root template. If the button below renders with the accent color and a hover state, the setup is complete — styles are bundled with the components, so nothing needs to be added to angular.json.

import { Component } from '@angular/core';
import { OgeButton } from '@oge-ui/buttons';

@Component({
  selector: 'app-root',
  imports: [OgeButton],
  template: `<oge-button text="It works" severity="accent" />`,
})
export class App {}

Next: style the app with design tokens, or jump straight to a component overview from the sidebar.