Layout

import { Component } from '@angular/core';
import { WrLayout, WrLayoutContent, WrLayoutFooter, WrLayoutHeader, WrLayoutSider } from 'ngwr/layout';

@Component({ imports: [WrLayout, WrLayoutContent, WrLayoutFooter, WrLayoutHeader, WrLayoutSider] })
export class MyComponent {}

<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>

Main content area

<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>

Main content area

Name	Description	Type	Default
`<wr-layout>`	A column; a row when a `<wr-layout-sider>` is a direct child.	`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`	`—`

Installation

Header / content / footer

Collapsible sider

API

See also