# withRenderOnNavigation

> A provideWr() feature for zoneless apps: a routed page is bound in the task that inserted it, so nothing fades in from browser defaults.

Source: https://ngwr.dev/reference/utils/with-render-on-navigation  
Kind: Util  
Added in v16.1  
Optional

## What it fixes

Zoneless, the router inserts a routed page in one task and Angular runs its first change detection in a later one. A browser that styles the page in between paints it without its bound classes. Fields fade from grey borders and white backgrounds into the theme on every page switch.

The feature ticks right after `NavigationEnd`, before the task ends. The page is bound before the first paint. Angular schedules the tick as a macrotask on purpose, see [angular/angular#57528](https://github.com/angular/angular/issues/57528).

## Usage

Pass it to `provideWr()` at bootstrap. Lives in `ngwr/utils/router`, since `@angular/router` is an optional peer.

```angular-ts
import { provideWr } from 'ngwr';
import { withRenderOnNavigation } from 'ngwr/utils/router';

export const appConfig: ApplicationConfig = {
  providers: [provideRouter(routes), provideWr(withRenderOnNavigation())],
};
```

## When you do not need it

| Case | Why |
| --- | --- |
| Your app uses zones | Change detection already runs in the same task. |
| Routed pages have no transitioning bindings | Nothing fades, so nothing shows. |
| Only ngwr components flicker | They carry static host classes since v16.1. The feature covers your own bindings. |

## API

| Name | Description | Type | Default |
| --- | --- | --- | --- |
| `withRenderOnNavigation()` | A `provideWr()` feature. Runs a change detection tick in a microtask right after `NavigationEnd`, before the browser paints the routed page. The tick Angular had scheduled is cancelled by it, so nothing runs twice. | `() => WrFeature<"render-on-navigation">` | `-` |

## See also

- [Configuration](https://ngwr.dev/docs/configuration) — Set app-wide options at bootstrap.
- [wrQueryParam](https://ngwr.dev/reference/utils/wr-query-param) — A writable signal linked to one query parameter: follows the address, writes it on set, one navigation per task, the default left out.