Configuration

import { provideWr } from 'ngwr';
import { withDensity } from 'ngwr/density';
import { withTheme } from 'ngwr/theme';
import { withToast } from 'ngwr/toast';

export const appConfig: ApplicationConfig = {
  providers: [
    provideWr(
      withDensity({ defaultDensity: 'sm' }),
      withToast({ position: 'bottom-end', duration: 6000 }),
      withTheme({ defaultMode: 'dark' }),
    ),
  ],
};

Feature	Entry point	What it sets
`withDensity()`	`ngwr/density`	Default density: sm, md, lg or touch
`withToast()`	`ngwr/toast`	Toast defaults: position, duration, maxStack, labels
`withTheme()`	`ngwr/theme`	Default mode (light, dark or auto) and the storage key
`withDates()`	`ngwr/date`	{ locale } pins the date locale (default: LOCALE_ID); { adapter } is your own adapter
`withStorage()`	`ngwr/storage`	Storage engine, key prefix and default TTL
`withMeta()`	`ngwr/meta`	Title template and default Open Graph and Twitter tags

Pass features at bootstrap. Only withDates() also works in a route's providers.
The same feature twice throws in dev mode.
withDensity() and [wrDensity] need @use 'ngwr/density' in your global styles. No component loads it, and without it the setting does nothing.
On a prerendered page, also ship wrThemePrePaintScript() with the same options as withTheme().

import { Check, Plus } from 'lucide';
import { lucideIcons, provideWrIcons } from 'ngwr/icon';
import {
  provideWrI18n,
  provideWrI18nBaseCatalogs,
  provideWrI18nStaticLoader,
} from 'ngwr/i18n';
import { wrEn } from 'ngwr/i18n/en';
import { provideWrLoadingBarRouter } from 'ngwr/loading-bar/router';

providers: [
  provideWrIcons(lucideIcons({ check: Check, plus: Plus })),
  provideWrI18n(),
  provideWrI18nBaseCatalogs({ en: wrEn }),
  provideWrI18nStaticLoader({ en: { app: { title: 'My app' } } }),
  provideRouter(routes),
  provideWrLoadingBarRouter(),
],

Call	Note
`provideWrIcons()`	Works at any level. A route adds to its parent's icons. Icon sets.
`provideWrI18nBaseCatalogs()`	Registers ngwr's strings under yours. Do not spread them into your catalog. Translations.
`provideWrLoadingBarRouter()`	Without it the loading bar never moves on navigation, and nothing warns.

import { Service } from '@angular/core';
import { provideWr } from 'ngwr';
import { WrDateAdapter, withDates, type WrDateFormat } from 'ngwr/date';

@Service()
export class AppDateAdapter extends WrDateAdapter<Date> {
  today(): Date { /* … */ }
  createDate(year: number, month: number, day: number): Date { /* month is 0-based */ }
  // Every WrDateFormat key, the 12h / 24h / Seconds variants of time and shortDateTime included.
  format(date: Date, format: WrDateFormat | (string & {})): string { /* … */ }
  // Must read back what format() printed. Return null to refuse the input.
  parse(value: string, format: WrDateFormat | (string & {})): Date | null { /* … */ }
  // …and the other abstract members of WrDateAdapter.
}

providers: [provideWr(withDates({ adapter: AppDateAdapter }))],

provideWr

Other providers

Your own date adapter

See also