# Schematics
> Angular CLI tooling shipped with ngwr — `ng add`, five generators, and an `ng update` migration for every major that needs one: v7, v8, v9, v12, v13 and v14. v10 and v11 ship none on purpose, because their breaks were painted colour and an empty codemod would say they were handled.
Source: https://ngwr.dev/start/schematics
Kind: Getting started, CLI
## 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.
```bash
# Drop-in install — prompts for styles, date adapter, density, theme.
ng add ngwr
```
## Interactive prompts
What the prompts look like:
```bash
# 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-scheme
```
## Non-interactive flags
```bash
# 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 --skipPeerInstall
```
## ng 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.
```bash
# 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 both
```
## What it writes
```angular-ts
// 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.
```bash
# 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
```angular-ts
// Before: src/app/pages/checkout/checkout.ts
import { Component } from '@angular/core';
@Component({
selector: 'app-checkout',
templateUrl: './checkout.html',
imports: [],
})
export class CheckoutPage {}
```
```angular-ts
// 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`.
```bash
# 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 once and inject WrLoadingBar; inject WrCookie.
```
## ng g ngwr:component-style
Append `@use 'ngwr/';` 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.
```bash
# Append `@use 'ngwr/';` 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 first
```
## ng 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).
```bash
# 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 .ts + .html + .scss under
# /app/pages//
```
## 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](https://ngwr.dev/start/migration) 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](https://ngwr.dev/start/versioning).
```bash
# 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
```bash
// Templates: 11 element / attribute rewrites across .html
→
→
→ ([multi]="false" just drops)
→
→
[wrTooltip]="…" → [wrPopover]="…" mode="tooltip"
→
→
→
→
→ | |
(picked from mode=, and the renamed inputs go with it;
the attribute form 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.
```