@talenra/components documentation
  1. Components
  2. WorkspaceHeaderComponent

File

workspace-header/src/workspace-header/workspace-header.component.ts

Description

Workspace Header displays a breadcrumb navigation, a title and a subtitle – while all of which are optional. It is typically used with a workspace-layout (e.g. Workspace Simple) and placed on top of the content section.

Import

Example :
import { WorkspaceHeaderComponent } from '@talenra/components/workspace-header';

../../../#/workspace-layout/workspace-simple

Implements

OnInit OnDestroy

Metadata

changeDetection ChangeDetectionStrategy.OnPush
host {
}
selector talenra-workspace-header
imports RouterLink BadgeComponent
styleUrls ./workspace-header.component.scss
templateUrl ./workspace-header.component.html

Index

Inputs

Inputs

counter
Type : number, unknown
Default value : 0, { transform: numberAttribute }

A numeric counter value attached to the title (visually represented as badge/call-out). Typically a number that represents the number of items contained in this section.

Example :
<talenra-workspace-header title="My Workspace" counter="42" />
counterMax
Type : number, undefined | unknown
Default value : undefined, { transform: (value: unknown): number | undefined => { const numeric: number = numberAttribute(value); return isNaN(numeric) ? undefined : numeric; }, }

The maximum value of the counter. If the counter value exceeds this limit, "+" will be displayed (e.g. "99+").

Example :
<talenra-workspace-header ... counterMax="99" />
path
Type : BreadcrumbFragment[]
Default value : []

Content displayed in the breadcrumb navigation

Example :
<talenra-workspace-header title="My Workspace" [path]="[{ label: 'Home', link: '/' }, { label: 'My Workspace' }]" />
subtitle
Type : string
Default value : ''

Subtitle displayed to the user

Example :
<talenra-workspace-header title="My Workspace" subtitle="My Subtitle" />
title
Type : string
Default value : ''

Title displayed to the user

Example :
<talenra-workspace-header title="My Workspace" />

Workspace Header Component

History

2025-05-18

Complete overhaul

https://gitlab.svanet.ch/talenra/talenra-workspace/-/merge_requests/749

  • Deprecate custom event heightUpdate (s. upgrade guide for details)
  • Replace @Input decorator with input signal
  • Replace @Output decorator with input signal
  • Add missing typings
  • Extend API docs with examples
  • Move simple template logic from controller to template
  • Rewrite unit test suite

results matching ""

    No results matching ""