Base page component for Decaf Angular applications.
Classes
- NgxPageDirective
Abstract directive that provides foundational functionality for page components. Extends NgxComponentDirective to add page-specific features including menu management, page title handling, and Ionic lifecycle hooks. This directive serves as the base class for all page-level components, providing consistent behavior for navigation, routing, and UI state.
- NgxPageDirective
Initializes the page directive with optional locale root and menu visibility settings. Calls the parent NgxComponentDirective constructor to set up base functionality including logging, localization, and component identification.
- NgxPageDirective#NgxPageDirective
Initializes the page directive with optional locale root and menu visibility settings. Calls the parent NgxComponentDirective constructor to set up base functionality including logging, localization, and component identification.
Members
string
# static NgxPageDirective#appName
Stores the name of the application, which can be used for display in headers, titles, or for logging and identification throughout the app.
Application name for display or identification purposes.
KeyValue
# static NgxPageDirective#globals
This property stores global configuration values that can be accessed throughout the application. It is typically used to manage shared state or settings that are relevant across multiple components or services.
Global key-value pairs for application-wide settings.
boolean
# protected static NgxPageDirective#hasMenu
Controls the visibility and availability of the application menu for this page. When set to true, the menu is enabled and accessible to users. When false, the menu is disabled, which is useful for pages like login screens or standalone views that should not show navigation options.
Flag indicating whether the page should display the navigation menu.
- Default Value:
- true
Array.<IMenuItem>
# protected static NgxPageDirective#menu
Contains the collection of menu items available for this page. Each menu item defines a navigation option with properties like label, URL, icon, and visibility settings. This array is used to construct the application's navigation menu and can be filtered or customized per page.
Menu items array for page navigation.
- Default Value:
- []
MenuController
# protected static NgxPageDirective#menuController
Injected service that provides programmatic control over Ionic menu components. This service allows the component to open, close, toggle, and manage menu states within the application. It provides access to menu functionality for implementing navigation and layout features that require menu interaction.
Ionic menu controller service for menu management.
string
# static NgxPageDirective#title
Stores the title text to be displayed for this page. This can be set dynamically based on the current route or menu configuration and is used to update the browser's title bar or page header.
Page title text for the current view.
- Default Value:
- ''
Title
# protected static NgxPageDirective#titleService
Injected service that provides control over the browser's document title. Used to dynamically set the page title based on the current route or active menu item, improving SEO and user experience.
Angular Title service for browser title management.
string
# static appName
Stores the name of the application, which can be used for display in headers, titles, or for logging and identification throughout the app.
Application name for display or identification purposes.
KeyValue
# static globals
This property stores global configuration values that can be accessed throughout the application. It is typically used to manage shared state or settings that are relevant across multiple components or services.
Global key-value pairs for application-wide settings.
boolean
# protected static hasMenu
Controls the visibility and availability of the application menu for this page. When set to true, the menu is enabled and accessible to users. When false, the menu is disabled, which is useful for pages like login screens or standalone views that should not show navigation options.
Flag indicating whether the page should display the navigation menu.
- Default Value:
- true
Array.<IMenuItem>
# protected static menu
Contains the collection of menu items available for this page. Each menu item defines a navigation option with properties like label, URL, icon, and visibility settings. This array is used to construct the application's navigation menu and can be filtered or customized per page.
Menu items array for page navigation.
- Default Value:
- []
MenuController
# protected static menuController
Injected service that provides programmatic control over Ionic menu components. This service allows the component to open, close, toggle, and manage menu states within the application. It provides access to menu functionality for implementing navigation and layout features that require menu interaction.
Ionic menu controller service for menu management.
string
# static title
Stores the title text to be displayed for this page. This can be set dynamically based on the current route or menu configuration and is used to update the browser's title bar or page header.
Page title text for the current view.
- Default Value:
- ''
Title
# protected static titleService
Injected service that provides control over the browser's document title. Used to dynamically set the page title based on the current route or active menu item, improving SEO and user experience.
Angular Title service for browser title management.
Methods
# async static NgxPageDirective#ngAfterViewInit() → {Promise.<void>}
This lifecycle hook is triggered just before the page becomes visible to the user. It enables or disables the application menu based on the hasMenu property, allowing pages to control whether the menu should be accessible. This is useful for pages like login screens where the menu should be hidden.
Ionic lifecycle hook called when the page is about to enter view.
A promise that resolves when menu state is updated
Promise.<void>
# async protected static NgxPageDirective#setPageTitle(route, menuopt) → {void}
Updates the browser's document title by finding the active menu item that matches the provided route. If a matching menu item is found, it sets the title using the format "Decaf For Angular - {menu title or label}". This improves SEO and provides clear context to users about the current page. If a custom menu array is provided, it uses that instead of the component's default menu.
Sets the browser page title based on the current route.
Parameters:
| Name | Type | Attributes | Description |
|---|---|---|---|
route |
string
|
The current route path to match against menu items |
|
menu |
Array.<IMenuItem>
|
<optional> |
Optional custom menu array to search (uses this.menu if not provided) |
void