# Configuration

> Set app-wide options at bootstrap.

Source: https://ngwr.dev/docs/configuration  
Updated in v15

## provideWr

Optional: pass only the features whose defaults you change.

```angular-ts
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()`](https://ngwr.dev/reference/services/theme) with the same options as `withTheme()`.

## Other providers

Icons, i18n and the loading-bar router are calls of their own.

```angular-ts
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](https://ngwr.dev/icons). |
| `provideWrI18nBaseCatalogs()` | Registers ngwr's strings under yours. Do not spread them into your catalog. [Translations](https://ngwr.dev/guides/translations/setup). |
| `provideWrLoadingBarRouter()` | Without it the loading bar never moves on navigation, and nothing warns. |

## Your own date adapter

For another date library, extend `WrDateAdapter<Date>` and pass the class to `withDates()`.

```angular-ts
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 }))],
```

## See also

- [Translations](https://ngwr.dev/guides/translations) — Translate your app and ngwr's own labels, and switch the locale at runtime.
- [Theming](https://ngwr.dev/guides/theming) — Load the theme, switch light and dark, and rebrand the palette.
- [Server-side rendering](https://ngwr.dev/guides/ssr) — Prerender and hydrate an ngwr app without mismatches.
- [WrTheme](https://ngwr.dev/reference/services/theme) — Switch between light, dark and auto, and keep the choice.
- [WrDensity](https://ngwr.dev/reference/services/density) — Switch control spacing between sm, md, lg and touch.
- [Toast](https://ngwr.dev/reference/components/toast) — Short notifications that stack in a corner of the screen.
- [Date Picker](https://ngwr.dev/reference/components/date-picker) — A text field with a popup for picking a date, a time or both.
- [WrStorage](https://ngwr.dev/reference/services/storage) — Typed, reactive key-value storage over localStorage or any engine, safe under SSR.