Import
import { PageHeaderModule } from '@backbase/ui-ang/page-header'
Usage
Use the bb-page-header-ui component to create a consistent page header layout. The title input is required.
<!-- Basic page header usage -->
<bb-page-header-ui title="Page title">
<div>Page content goes here</div>
</bb-page-header-ui>
Inputs
|
Input |
Type |
Default |
|---|---|---|
|
navigationLinkText |
string |
undefined |
|
primaryAction |
ButtonAction |
undefined |
|
secondaryAction |
ButtonAction |
undefined |
|
showBackground |
boolean |
false |
|
subtitle |
string |
undefined |
|
title (required) |
string |
|
ButtonAction interface
The primaryAction and secondaryAction inputs accept objects conforming to the ButtonAction interface:
interface ButtonAction {
text: string; // Button label text (required)
icon?: string; // Optional icon name (defaults to 'add' if not provided)
}
navigationLinkText
The navigationLinkText input sets the text for a navigation button that appears at the top of the header, typically used for "back" navigation.
<!-- Page header with navigation link -->
<bb-page-header-ui
[navigationLinkText]="'Back to Dashboard'"
title="User Profile">
<div>Page content</div>
</bb-page-header-ui>
primaryAction
The primaryAction input defines a primary action button with optional icon. It accepts an object with text and optional icon properties.
<!-- Page header with primary action -->
<bb-page-header-ui
title="Products"
[primaryAction]="{ text: 'Add Product', icon: 'add' }">
<div>Page content</div>
</bb-page-header-ui>
secondaryAction
The secondaryAction input defines a secondary action button with optional icon. It accepts an object with text and optional icon properties.
<!-- Page header with both primary and secondary actions -->
<bb-page-header-ui
title="Products"
[primaryAction]="{ text: 'Add Product', icon: 'add' }"
[secondaryAction]="{ text: 'Import', icon: 'upload' }">
<div>Page content</div>
</bb-page-header-ui>
showBackground
The showBackground input enables a colored background behind the header and changes text and buttons to on-color variants for better contrast.
<!-- Page header with colored background -->
<bb-page-header-ui
[showBackground]="true"
title="Dashboard"
subtitle="Welcome back"
[primaryAction]="{ text: 'New Report' }">
<div>Page content</div>
</bb-page-header-ui>
subtitle
The subtitle input adds supplementary text below the main title to provide additional context.
<!-- Page header with subtitle -->
<bb-page-header-ui
title="User Management"
subtitle="Manage user accounts and permissions">
<div>Page content</div>
</bb-page-header-ui>
title
The title input sets the main heading text for the page. This input is required and will be displayed as an H1 element.
<!-- Page header with title -->
<bb-page-header-ui title="Settings">
<div>Page content</div>
</bb-page-header-ui>
Custom actions
For more complex action layouts, you can use the bbPageHeaderCustomAction directive to provide a custom template instead of the default action buttons.
<!-- Page header with custom action template -->
<bb-page-header-ui title="Products" subtitle="Manage your inventory">
<ng-template bbPageHeaderCustomAction>
<div class="bb-button-bar">
<bb-dropdown-menu-ui container="body" icon="caret-down">
<ng-template bbDropdownLabel>
<span>Actions</span>
</ng-template>
<ng-template bbDropdownMenuItem>
<ul>
<li><button class="dropdown-item">Export</button></li>
<li><button class="dropdown-item">Import</button></li>
<li><button class="dropdown-item">Settings</button></li>
</ul>
</ng-template>
</bb-dropdown-menu-ui>
</div>
</ng-template>
<div>Page content goes here</div>
</bb-page-header-ui>
Outputs
|
Output |
Type |
Description |
|---|---|---|
|
navigationLinkClick |
EventEmitter<void> |
Emitted when the navigation link is clicked |
|
primaryActionClick |
EventEmitter<void> |
Emitted when the primary action button is clicked |
|
secondaryActionClick |
EventEmitter<void> |
Emitted when the secondary action button is clicked |