ng add ngwrOr by hand:
pnpm add ngwr @angular/cdkAdd ngwr to an Angular app.
ng add installs the peers and adds the theme to your global styles.
ng add ngwrOr by hand:
pnpm add ngwr @angular/cdkIn your global stylesheet: the theme first, then one line per component you render.
@use 'ngwr/theme';
@use 'ngwr/button';
@use 'ngwr/select';| Optional sheet | What it adds |
|---|---|
@use 'ngwr/density'; | The density scale. Needed for withDensity() and [wrDensity] |
@use 'ngwr/reset'; | A modern CSS reset |
@use 'ngwr/grid'; | A 12-column grid and container |
@use 'ngwr/typography-utilities'; | Text utility classes |
@use 'ngwr/animations'; | Keyframes and animation classes |
@use 'ngwr/breakpoints' as bp; | Breakpoint mixins for your own SCSS |
Write them below the theme line: reset, animations and typography-utilities load the token layer too.
Import each component from its own entry point: ngwr/button, not ngwr.
import { Component } from '@angular/core';
import { WrButton } from 'ngwr/button';
@Component({
selector: 'app-root',
imports: [WrButton],
template: `<wr-btn color="primary">Save</wr-btn>`,
})
export class App {}Install an icon set and register the icons you use. All icon sets.
pnpm add lucideimport { Check } from 'lucide';
import { lucideIcons, provideWrIcons } from 'ngwr/icon';
@Component({
providers: [provideWrIcons(lucideIcons({ check: Check }))],
template: `<wr-btn icon="check">Save</wr-btn>`,
})
export class App {}Optional. One provideWr() call, one feature per setting. withDensity() also needs @use 'ngwr/density'. Configuration.
import { provideWr } from 'ngwr';
import { withDensity } from 'ngwr/density';
import { withToast } from 'ngwr/toast';
export const appConfig: ApplicationConfig = {
providers: [provideWr(withDensity(), withToast({ duration: 6000 }))],
};| Command | What it does |
|---|---|
ng add ngwr | Installs peers, adds the theme to styles, prints the providers to paste |
ng add ngwr --styles=theme --density=lg | The same without prompts |
ng g ngwr:use WrButton --path <file> | Adds the import and puts it in the component imports |
ng g ngwr:provider <name> | Adds a provider to app.config.ts: density, toast, storage or theme inside provideWr(), icons, i18n or loading-bar-router as a call of its own |
ng g ngwr:component-style <name> | Adds @use 'ngwr/<name>' to global styles, below the theme line |
ng g ngwr:icon-set | Writes a tree-shaken icon barrel |
ng g ngwr:page | Scaffolds a form, table or dashboard page |
ng update ngwr | Updates from any earlier major and runs its migrations |
| ngwr | Angular | CDK | Node |
|---|---|---|---|
| 15.x | 22 | 22 | 22.22+, 24.15+, 26 |
| 14.x | 22+ | 22+ | 22.22+, 24.15+, 26 |
| 7.x to 13.x | 22+ | 22+ | 24.16+, 26 |
| 6.x | 17+ | 17+ | 24+ |
| 5.x | 17+ | 17+ | 20+ |
Browsers: Chrome 123, Firefox 120, Safari 17.5 and newer.