# lwr-outlet

An outlet dynamically renders view components, which display when an application navigates to a location.

## Properties

| Property      | Type    | Required/Optional | Description                                                                                                                                               |
| ------------- | ------- | ----------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `view-name`   | String  | Optional          | The key of the [`ViewSet`](/docs/platform/lwr/references/csr-reference/routedestination.md#viewset) entry to display. The default value is `default`.     |
| `refocus-off` | Boolean | Optional          | Refocusing is on by default for accessibility. If `refocus-off` is present, the outlet doesn't put the browser focus on the view component when it loads. |

## Events

An outlet component fires these [events](https://developer.salesforce.com/docs/platform/lwc/guide/events-handling.md):

- `onviewchange`
  - A handler for the `viewchange` event that is dispatched whenever the view component changes. `event.detail` is the view component class.

```javascript
type Constructor<T = object> = new (...args: any[]) => T;
interface Constructable<T = object> {
    constructor: Constructor<T>
}
interface ViewChangePayload {
    detail: Constructable;
}
```

- `onviewerror`
  - A handler for the `viewerror` event that is dispatched whenever the view component cannot be rendered. `event.detail` is the error and stack.

```javascript
interface ViewErrorPayload {
  detail: {
    error: Error,
    stack: string,
  };
}
```

### Usage

An outlet dynamically renders view components. The `lwr-outlet` Lightning web component displays the current view component in the DOM.

This process is naturally lazy. The view isn't imported until the outlet consumes it, so any unused views aren't fetched. When the router's view state changes, the outlet is flagged to display the vivew. At that point, if the view module hasn't been fetched already, there may be an async process to retrieve it.

```sfdocs-code {"lang":"html", "title": "my/app/app.html", "src": "" }
<template>
    <lwr-router-container>
        <lwr-outlet refocus-off onviewchange={onViewChange} onviewerror={onViewError}>
            <div slot="error">View component cannot display</div>
        </lwr-outlet>
    </lwr-router-container>
</template>
```

It's possible for a [route definition handler](/docs/platform/lwr/guide/lwr-route-handler-modules.md#1-the-router-calls-routedefinitionhandler) to return multiple views, like this:

```javascript
import type { Module, RouteHandlerCallback } from "lwr/router";

export default class HomeHandler {
  callback: RouteHandlerCallback;

  constructor(callback: RouteHandlerCallback) {
    this.callback = callback;
  }

  dispose(): void {}

  update(): void {
    this.callback({
      viewset: {
        // return multiple views
        default: (): Promise<Module> => import("my/home"),
        nav: (): Promise<Module> => import("my/homeNav"),
        footer: (): Promise<Module> => import("my/homeInfo"),
      },
    });
  }
}
```

You can use multiple outlets to display all the current view components by setting different `view-name` values.

```sfdocs-code {"lang":"html", "title": "my/app/app.html", "src": "" }
<template>
    <lwr-router-container>
        <lwr-outlet view-name="nav"></lwr-outlet>
        <lwr-outlet><!-- default view --></lwr-outlet>
        <lwr-outlet view-name="footer"></lwr-outlet>
    </lwr-router-container>
</template>
```