# 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 18
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 478
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 499
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 182
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 601
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 510
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 39
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 443
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 533
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 467
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 150
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 565
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 110
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 521
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 158
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 574
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 174
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 592
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 166
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 583
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 555
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 71
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 90
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 100
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 121
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 61
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 141
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>