ng add ngwr
One-shot install. Installs @angular/cdk, optionally a date adapter (date-fns or Luxon), appends @use 'ngwr'; to the global stylesheet, and prints a tailored bootstrap snippet with the providers you picked.
# Drop-in install — prompts for styles, date adapter, density, theme.
ng add ngwrInteractive prompts
What the prompts look like:
# Sample run (defaults shown in brackets):
? How should ngwr styles be wired?
❯ All — one `@use 'ngwr';` import (recommended)
None — opt in per-component later
? Wire a date adapter? (Used by calendar / date-picker.)
❯ None — skip (you can add later)
Native — built-in Date, no extra deps
date-fns — small, modular
Luxon — Intl-backed, locale-rich
? Pick a default density
❯ None — use lib defaults (md)
sm — tight spacing
lg — relaxed spacing
? Theme starter?
❯ None — stay on lib defaults
Light
Dark
System — auto-switch via prefers-color-schemeNon-interactive flags
# Skip prompts:
ng add ngwr --styles=all --dateAdapter=date-fns --density=lg --theme=system
# "None" is spelled `none` — it is a real enum value, not an empty flag:
ng add ngwr --styles=none --dateAdapter=none --density=none --theme=none
# Every accepted value:
# --styles all | none (default: all)
# --dateAdapter none | native | date-fns | luxon (default: none)
# --density none | sm | lg (default: none)
# --theme none | light | dark | system (default: none)
#
# Those four defaults are also what a non-interactive run picks — so
# `--theme=system` is the flag that gets you provideWrTheme() in the
# printed snippet. Omit it and no theme provider is printed at all.
# CI / monorepo — skip the install task:
ng add ngwr --skipPeerInstallng g ngwr:icon-set
Scaffold a tree-shaken icon barrel file. Pick a curated set (basic / navigation / forms / feedback) or pass an explicit list. Combine both for a custom mix.
# Generate a tree-shaken icon barrel under src/app/icons.ts.
ng g ngwr:icon-set # defaults to the "basic" set
ng g ngwr:icon-set checkout --set=forms # named file + curated set
ng g ngwr:icon-set --icons=plus,trash,checkmark # explicit list
ng g ngwr:icon-set --set=navigation --icons=star,heart # combine bothWhat it writes
// src/app/icons.ts (generated)
import { Check, Copy, Pencil, Plus, Search, Trash2, X } from 'lucide';
import { lucideIcons } from 'ngwr/icon/adapters/lucide';
export const APP_ICONS = lucideIcons({
checkmark: Check,
close: X,
add: Plus,
edit: Pencil,
trash: Trash2,
search: Search,
copy: Copy,
});
// Then wire into bootstrap:
import { provideWrIcons } from 'ngwr/icon';
import { APP_ICONS } from './icons';
providers: [provideWrIcons(APP_ICONS)],ng g ngwr:use
Add an import { WrFoo } line and splice WrFoo into the @Component({ imports: [...] }) array of an existing component file. 215 public symbols are recognized — the map is generated from a public-api scan at build time, so it cannot drift from what the package exports.
# Add the import + splice into a component's @Component imports array.
ng g ngwr:use WrButton --path src/app/pages/checkout/checkout.ts
ng g ngwr:use WrSelect --path src/app/pages/checkout/checkout.ts
# 215 symbols recognized — every public Wr* export the scan finds, mapped to
# the entry point it comes from.Before / after
// Before: src/app/pages/checkout/checkout.ts
import { Component } from '@angular/core';
@Component({
selector: 'app-checkout',
templateUrl: './checkout.html',
imports: [],
})
export class CheckoutPage {}// After running `ng g ngwr:use WrButton …`:
import { Component } from '@angular/core';
import { WrButton } from 'ngwr/button';
@Component({
selector: 'app-checkout',
templateUrl: './checkout.html',
imports: [WrButton],
})
export class CheckoutPage {}ng g ngwr:provider
Splice a provideWr*() call into your bootstrap providers array. Useful for adding a single subsystem after the initial ng add.
# Splice a provideWr*() call into bootstrapApplication's providers array.
ng g ngwr:provider overlay
ng g ngwr:provider toast
ng g ngwr:provider date-adapter
# Available: overlay | icons | toast | i18n | date-adapter | density |
# storage | theme
#
# loading-bar and cookie are not here on purpose: neither has a provider.
# Render <wr-loading-bar /> once and inject WrLoadingBar; inject WrCookie.ng g ngwr:component-style
Append @use 'ngwr/<name>'; to the project's global stylesheet. Pairs with the --styles=none choice on ng add — opt into ngwr styles per component instead of pulling the whole bundle.
# Append `@use 'ngwr/<name>';` to the project's global stylesheet.
# Pairs with `--styles=none` on `ng add`.
ng g ngwr:component-style button
ng g ngwr:component-style select
ng g ngwr:component-style theme # always include the theme firstng g ngwr:page
Scaffold a starter page wired up with ngwr components. Three presets — form (form-field + input + button), table (table + pagination), dashboard (card grid + statistic).
# Scaffold a starter page wired up with ngwr components.
ng g ngwr:page form signup
ng g ngwr:page table users
ng g ngwr:page dashboard overview
# Creates <name>.ts + <name>.html + <name>.scss under
# <sourceRoot>/app/pages/<name>/ng update
One ng update ngwr@14 from any earlier major runs every migration newer than your installed version, in order — do not step through the majors, and never target a 7.x, 8.x or 9.x release, whose schematics die with exports is not defined in ES module scope (the migration guide has why, and the recovery). Each migration touches every .html, .ts and .scss in the workspace (excluding node_modules, dist, and the rest). Regex-based — verify with git diff afterwards. Some migrations only REPORT: where a fix needs a decision a codemod cannot make, it names the files and leaves them to you rather than guessing. There is one of these per MAJOR and never for anything else, which is a rule rather than a habit: a breaking change cannot ride a minor or a patch, because the release script refuses that bump.
# One command from any earlier major: runs every migration newer than
# your installed version, in order. Never target a 7.x, 8.x or 9.x release.
ng update ngwr@14
# The example below is v7's, the largest pure rewrite in the collection.
# v14's own rewrites are six renames; the rest of it reports.What gets rewritten
// Templates: 11 element / attribute rewrites across .html
<wr-autocomplete …> → <wr-select mode="search" …>
<wr-chips-input …> → <wr-select mode="tag" …>
<wr-select [multi] …> → <wr-select mode="multi" …> ([multi]="false" just drops)
<wr-time-picker …> → <wr-date-picker mode="time" …>
<wr-date-time-picker …> → <wr-date-picker mode="datetime" …>
[wrTooltip]="…" → [wrPopover]="…" mode="tooltip"
<wr-tree-select …> → <wr-tree openOn="overlay" …>
<wr-bottom-sheet …> → <wr-drawer position="bottom" …>
<wr-count-up-text …> → <wr-count-up …>
<wr-image …> → <wr-lightbox …>
<wr-animated-text …> → <wr-typewriter …> | <wr-decrypt-text …> | <wr-split-text …>
(picked from mode=, and the renamed inputs go with it;
the attribute form <h1 wr-animated-text> is left alone)
// Imports (.ts): module-path + symbol renames
'ngwr/autocomplete' → 'ngwr/select' (WrAutocomplete → WrSelect)
'ngwr/chips-input' → 'ngwr/select' (WrChipsInput → WrSelect)
'ngwr/time-picker' → 'ngwr/date-picker' (WrTimePicker → WrDatePicker)
'ngwr/date-time-picker' → 'ngwr/date-picker' (WrDateTimePicker → WrDatePicker)
'ngwr/tooltip' → 'ngwr/popover' (WrTooltip → WrPopover)
'ngwr/tree-select' → 'ngwr/tree' (WrTreeSelect → WrTree)
'ngwr/bottom-sheet' → 'ngwr/drawer' (WrBottomSheet → WrDrawer)
'ngwr/count-up-text' → 'ngwr/counter' (WrCountUpText → WrCountUp)
'ngwr/image' → 'ngwr/lightbox' (WrImage → WrLightbox)
'ngwr/animated-text' → 'ngwr/typewriter' (WrAnimatedText → WrTypewriter)
'ngwr/count-up' → 'ngwr/counter' (entry merged; symbol unchanged)
'ngwr/tag' → 'ngwr/badge' (entry merged; symbol unchanged)
'ngwr/form-field' → 'ngwr/form' (entry merged; symbol unchanged)
// …plus one call rewrite: WrValidators.email → Validators.email (it moved to
// @angular/forms; add that import yourself).
// Stylesheets: @use / @import / @forward
@use 'ngwr/autocomplete'; → @use 'ngwr/select';
// …same set as imports.