# new HeaderComponent()
The HeaderComponent provides a consistent header across the application with configurable elements such as title, back button, menu button, and CRUD operation controls. It extends NgxComponentDirective to inherit common functionality and implements OnInit for initialization logic. This component is designed to be flexible and adaptable to different page contexts, supporting various navigation patterns and visual styles.
Header component for application pages.
- Implements:
- OnInit
View Source app/components/header/header.component.ts, line 19
Extends
Classes
- HeaderComponent
Initializes a new HeaderComponent by calling the parent class constructor with the component name for logging and identification purposes.
- HeaderComponent
Initializes a new HeaderComponent by calling the parent class constructor with the component name for logging and identification purposes.
Members
string
# backButtonColor
Sets the color of the back button icon using Ionic's predefined color palette. This allows the back button icon to match the application's color scheme.
Color of back button icon.
string
|
FunctionLike
# backButtonLink
Specifies a custom URL or function to execute when the back button is clicked. This overrides the default behavior of navigating to the previous page in history.
Custom navigation target for the back button.
'start'
|
'end'
# buttonMenuSlot
Determines whether the menu button appears at the start or end of the header. This allows for customization of the header layout based on design requirements.
Position of the menu button in the header.
- Default Value:
- 'start'
View Source app/components/header/header.component.ts, line 502
string
# color
Sets the background color of the header using Ionic's predefined color palette. This allows the header to match the application's color scheme.
Background color of the header.
- Default Value:
- "primary"
View Source app/components/header/header.component.ts, line 523
boolean
# floating
When true the header uses a floating style (different offset / appearance).
Floating headers are typically used to overlay content and use a larger stickyOffset.
Enable floating header mode.
- Default Value:
- false
View Source app/components/header/header.component.ts, line 183
boolean
# floating
When true the header uses a floating style (different offset / appearance).
Floating headers are typically used to overlay content and use a larger stickyOffset.
Enable floating header mode.
- Default Value:
- false
View Source app/components/header/header.component.ts, line 625
string
# logo
When provided, displays a logo image in the header instead of or alongside the title text. This can be used for branding purposes.
URL or path to the logo image.
- Default Value:
- ""
View Source app/components/header/header.component.ts, line 534
OperationKeys
|
undefined
# operation
Optional input that allows pages to specify the active operation (CREATE, READ, UPDATE, DELETE) which can alter header controls (buttons, visibility) and routing behavior. When undefined the component will inherit or resolve the operation from the surrounding context or parent component.
Overrides the current CRUD operation context for this header instance.
- Default Value:
- undefined
View Source app/components/header/header.component.ts, line 40
OperationKeys
|
undefined
# operation
Optional input that allows pages to specify the active operation (CREATE, READ, UPDATE, DELETE) which can alter header controls (buttons, visibility) and routing behavior. When undefined the component will inherit or resolve the operation from the surrounding context or parent component.
Overrides the current CRUD operation context for this header instance.
- Default Value:
- undefined
View Source app/components/header/header.component.ts, line 467
boolean
# showBackButton
When set to true, the component will display a back button that allows users to navigate to the previous page. This is particularly useful for multi-level navigation flows.
Controls whether the back button is displayed.
- Default Value:
- true
View Source app/components/header/header.component.ts, line 557
boolean
# showMenuButton
When set to true, the component will display a menu button that can be used to toggle the application's side menu. This is particularly useful for mobile applications or any interface that uses a slide-in menu for navigation. The menu controller is automatically enabled/disabled based on this property.
Controls whether the menu button is displayed.
- Default Value:
- true
View Source app/components/header/header.component.ts, line 491
boolean
# showThemeToggleButton
Accepts either a boolean value or a string representation of a boolean. When enabled, users can switch between light and dark color schemes.
Enables or disables the color scheme toggle control in the header.
- Default Value:
- true
View Source app/components/header/header.component.ts, line 151
boolean
# showThemeToggleButton
Accepts either a boolean value or a string representation of a boolean. When enabled, users can switch between light and dark color schemes.
Enables or disables the color scheme toggle control in the header.
- Default Value:
- true
View Source app/components/header/header.component.ts, line 589
ElementSize
# size
Controls the width of the container using predefined size classes. Options include 'block', 'small', 'medium', 'large', and others defined in the ElementSize type. This property is ignored when expand is true.
Size preset for the container width.
- Default Value:
- 'expand'
View Source app/components/header/header.component.ts, line 111
ElementSize
# size
Controls the width of the container using predefined size classes. Options include 'block', 'small', 'medium', 'large', and others defined in the ElementSize type. This property is ignored when expand is true.
Size preset for the container width.
- Default Value:
- 'expand'
View Source app/components/header/header.component.ts, line 545
boolean
# sticky
When true the header will toggle a sticky state when the page is scrolled beyond a configurable offset. Useful for keeping the header visible while scrolling.
Enable sticky header behavior.
- Default Value:
- false
View Source app/components/header/header.component.ts, line 159
boolean
# sticky
When true the header will toggle a sticky state when the page is scrolled beyond a configurable offset. Useful for keeping the header visible while scrolling.
Enable sticky header behavior.
- Default Value:
- false
View Source app/components/header/header.component.ts, line 598
boolean
# stickyActive
This is set by the component (not an input) and updated by the page scroll observer. Consumers can bind to it in templates if they need to react to the sticky transition.
Runtime flag indicating whether the header is currently in the sticky state.
- Default Value:
- false
View Source app/components/header/header.component.ts, line 175
boolean
# stickyActive
This is set by the component (not an input) and updated by the page scroll observer. Consumers can bind to it in templates if they need to react to the sticky transition.
Runtime flag indicating whether the header is currently in the sticky state.
- Default Value:
- false
View Source app/components/header/header.component.ts, line 616
number
# stickyOffset
The header becomes sticky when the page scroll position passes this number of pixels.
When floating is enabled the default offset is larger to account for different UI spacing.
Vertical offset (in pixels) used to trigger the sticky state.
- Default Value:
- 80
View Source app/components/header/header.component.ts, line 167
number
# stickyOffset
The header becomes sticky when the page scroll position passes this number of pixels.
When floating is enabled the default offset is larger to account for different UI spacing.
Vertical offset (in pixels) used to trigger the sticky state.
- Default Value:
- 80
View Source app/components/header/header.component.ts, line 607
string
# title
Sets the main title text This typically represents the name of the current page or section.
The title text displayed in the header.
boolean
# translucent
When set to true, the header will have a translucent appearance, allowing content behind it to be partially visible. This creates a modern, layered UI effect.
Controls whether the header has a translucent effect.
- Default Value:
- false
View Source app/components/header/header.component.ts, line 579
string
# user
Sets the color of the back button icon using Ionic's predefined color palette. This allows the back button icon to match the application's color scheme.
Color of back button icon.
string
# static backButtonColor
Sets the color of the back button icon using Ionic's predefined color palette. This allows the back button icon to match the application's color scheme.
Color of back button icon.
string
|
FunctionLike
# static backButtonLink
Specifies a custom URL or function to execute when the back button is clicked. This overrides the default behavior of navigating to the previous page in history.
Custom navigation target for the back button.
'start'
|
'end'
# static buttonMenuSlot
Determines whether the menu button appears at the start or end of the header. This allows for customization of the header layout based on design requirements.
Position of the menu button in the header.
- Default Value:
- 'start'
View Source app/components/header/header.component.ts, line 72
string
# static color
Sets the background color of the header using Ionic's predefined color palette. This allows the header to match the application's color scheme.
Background color of the header.
- Default Value:
- "primary"
View Source app/components/header/header.component.ts, line 91
string
# static logo
When provided, displays a logo image in the header instead of or alongside the title text. This can be used for branding purposes.
URL or path to the logo image.
- Default Value:
- ""
View Source app/components/header/header.component.ts, line 101
boolean
# static showBackButton
When set to true, the component will display a back button that allows users to navigate to the previous page. This is particularly useful for multi-level navigation flows.
Controls whether the back button is displayed.
- Default Value:
- true
View Source app/components/header/header.component.ts, line 122
boolean
# static showMenuButton
When set to true, the component will display a menu button that can be used to toggle the application's side menu. This is particularly useful for mobile applications or any interface that uses a slide-in menu for navigation. The menu controller is automatically enabled/disabled based on this property.
Controls whether the menu button is displayed.
- Default Value:
- true
View Source app/components/header/header.component.ts, line 62
string
# static title
Sets the main title text This typically represents the name of the current page or section.
The title text displayed in the header.
boolean
# static translucent
When set to true, the header will have a translucent appearance, allowing content behind it to be partially visible. This creates a modern, layered UI effect.
Controls whether the header has a translucent effect.
- Default Value:
- false
View Source app/components/header/header.component.ts, line 142
string
# static user
Sets the color of the back button icon using Ionic's predefined color palette. This allows the back button icon to match the application's color scheme.
Color of back button icon.
Methods
# async ngOnInit() → {Promise.<void>}
Sets up the component by processing boolean inputs, enabling/disabling the menu controller, and building the CSS class string based on the component's properties. This method prepares the component for user interaction by ensuring all properties are properly initialized.
Initializes the component after Angular first displays the data-bound properties.
Promise.<void>