<tyro-ui-page-header>

Page Header

Standard header for dashboard pages. Displays a label, a title and a description via ng-content. Used at the top of every documentation and dashboard page.

Preview

label + title + ng-content description

<tyro-ui-exemple>

My component

Short description of what the component does, displayed as ng-content below the title.


Inputs

Property
Type
Default
Description
[title] string ''Main title displayed in large font
[label?] string -Eyebrow label displayed above the title (e.g. "<tyro-ui-navbar>")

Content projection

The description text is projected via ng-content - it accepts HTML including inline <code> tags.

<tyro-ui-page-header label="<tyro-ui-navbar>" title="Navbar">
  @if (lang() === 'en') {
    Description in English with <code>inline code</code>.
  } @else {
    Description en français avec du <code>code inline</code>.
  }
</tyro-ui-page-header>