Installation
import { WrPageHeader } from 'ngwr/page-header';
@Component({ imports: [WrPageHeader] })
export class MyComponent {}Basic
<wr-page-header title="Settings" subtitle="Manage your workspace">
<div wrPageHeaderActions>
<wr-btn>Invite</wr-btn>
<wr-btn color="primary">Save</wr-btn>
</div>
</wr-page-header>Narrow container (container query)
With responsive, the title + actions row stacks vertically when the header's own box is too narrow — a container query on its own width, not the viewport, so it adapts inside a split pane or sidebar even on a wide page. The box below is fixed at 380px.
<div style="width: 380px"><wr-page-header responsive …>…</wr-page-header></div>API
| Name | Description | Type | Default |
|---|---|---|---|
title | Primary title shown as an h1. | string | '' |
subtitle | Secondary line below the title. | string | '' |
responsive | Stack the title and actions vertically when the header's own box is too narrow to sit them side by side (a container query on its own width, not the viewport — so it adapts inside a narrow column or split pane). | boolean | false |