Get Started
Get ng-oat installed and configured in under five minutes. This guide walks you through every step from a fresh Angular project to a working component.
Prerequisites
Before you start, make sure you have:
- Node.js 20 or newer (
node --versionto check) - Angular CLI 21+ (
ng version) - An existing Angular project, or create one with
ng new my-app
Step 1 — Install packages
Install the package — it ships the Oat CSS framework as a bundled asset, so there's nothing extra to add:
npm install @letsprogram/ng-oat@letsprogram/ng-oat includes the Oat CSS framework, Angular component wrappers, Signal Forms fields, and design-token utilities — all in one package.
Step 2 — Add Oat CSS to your project
Open your angular.json and add the Oat stylesheet to the styles array. This makes Oat's CSS available globally across your entire app. No JavaScript file is needed — all interactive behavior is handled natively by Angular components.
// angular.json
{
"projects": {
"my-app": {
"architect": {
"build": {
"options": {
"styles": [
"node_modules/@letsprogram/ng-oat/assets/oat/oat.css",
"node_modules/@letsprogram/ng-oat/src/lib/tokens/tokens.css",
"src/styles.css"
]
}
}
}
}
}
}Make sure oat.css comes before your own styles.css so you can override design tokens easily.
Step 3 — Configure the provider
Add provideNgOat() to your application config. This sets up the injection tokens that ng-oat components need internally.
// src/app/app.config.ts
import { ApplicationConfig } from '@angular/core';
import { provideRouter } from '@angular/router';
import { provideNgOat } from '@letsprogram/ng-oat';
import { routes } from './app.routes';
export const appConfig: ApplicationConfig = {
providers: [
provideRouter(routes),
provideNgOat(),
],
};Step 4 — Use your first component
Import any component directly in your standalone component's imports array. No module registration needed — every ng-oat component is standalone.
// src/app/app.ts
import { Component } from '@angular/core';
import { NgOatButton, NgOatBadge } from '@letsprogram/ng-oat';
@Component({
selector: 'app-root',
imports: [NgOatButton, NgOatBadge],
template: `
<h1>Hello ng-oat!</h1>
<ng-oat-button variant="primary">Click me</ng-oat-button>
<ng-oat-badge variant="success">Online</ng-oat-badge>
`,
})
export class App {}That's it. You should see an Oat-styled button and badge rendered in your app.
Step 5 — Optional: Enable theming
If you want runtime theme switching (dark mode, custom color palettes, etc.), add the theme provider alongside provideNgOat():
// src/app/app.config.ts
import { provideNgOat, provideNgOatTheme } from '@letsprogram/ng-oat';
export const appConfig: ApplicationConfig = {
providers: [
provideNgOat(),
provideNgOatTheme({
tokens: {
'--oat-primary': '#6366f1',
'--oat-radius-medium': '8px',
},
}),
],
}; Then inject NgOatThemeRef anywhere in your app to change tokens at runtime. Check the Design Tokens page for a live playground.
Project structure recommendation
For larger projects, here's a structure that works well with ng-oat:
src/
├── app/
│ ├── app.config.ts ← provideNgOat() goes here
│ ├── app.routes.ts
│ ├── app.ts
│ ├── layout/
│ │ ├── header.ts ← use NgOatSidebar, NgOatTooltip
│ │ └── footer.ts
│ ├── pages/
│ │ ├── dashboard.ts ← use NgOatCard, NgOatTable, etc.
│ │ └── settings.ts
│ └── shared/
│ └── confirm-dialog.ts ← use NgOatDialogComponent
├── styles.css ← override Oat design tokens here
└── index.html