Installation
import {
WrLayout,
WrLayoutHeader,
WrLayoutSider,
WrLayoutContent,
WrLayoutFooter
} from 'ngwr/layout';Header / content / footer
<wr-layout>
<wr-layout-header>App bar</wr-layout-header>
<wr-layout-content>Main</wr-layout-content>
<wr-layout-footer>© 2026</wr-layout-footer>
</wr-layout>Collapsible sider
Nested row layout — header on top, sider + content beneath.
<wr-layout>
<wr-layout-header>App bar</wr-layout-header>
<wr-layout>
<wr-layout-sider [(collapsed)]="collapsed">Sidebar</wr-layout-sider>
<wr-layout-content>Main</wr-layout-content>
</wr-layout>
</wr-layout>API
| Name | Description | Type | Default |
|---|---|---|---|
<wr-layout> | Flex container. Lays out as a column by default; switches to a row when a <wr-layout-sider> is among its direct children. | component | — |
<wr-layout-header> | Top bar (role="banner"). Doesn't grow. | component | — |
<wr-layout-sider> | Collapsible side panel. toggle() flips the collapsed state. | component | — |
[(collapsed)] | Two-way bindable collapsed state. | boolean | false |
width | Width when expanded. Any CSS length. | string | '16rem' |
collapsedWidth | Width when collapsed. Any CSS length; 0 fully hides it. | string | '4rem' |
reverse | Place the sider on the right edge instead of the left. | boolean | false |
(collapsedChanged) | Emits whenever collapsed changes, alongside the two-way binding. | boolean | — |
<wr-layout-content> | Main area (role="main"). Flex-grows to fill. | component | — |
<wr-layout-footer> | Bottom bar (role="contentinfo"). Doesn't grow. | component | — |