# new DecafComponent()
Base class for all Decaf UI components, providing common state management, logging, localization, navigation hooks, CRUD context metadata, and repository integration used by higher-level decorators and renderers.
Base class for all Decaf UI components
Classes
- DecafComponent
Base class for all Decaf UI components, providing common state management, logging, localization, navigation hooks, CRUD context metadata, and repository integration used by higher-level decorators and renderers.
Members
# protected readonly OperationKeys
Exposes the OperationKeys enum to the component template, enabling conditional rendering and behavior based on operation types. This protected readonly property ensures that template logic can access operation constants while maintaining encapsulation and preventing accidental modification.
Reference to CRUD operation constants for template usage.
# protected readonly OperationKeys
Exposes the OperationKeys enum to the component template, enabling conditional rendering and behavior based on operation types. This protected readonly property ensures that template logic can access operation constants while maintaining encapsulation and preventing accidental modification.
Reference to CRUD operation constants for template usage.
# protected _repository
Provides a connection to the data layer for retrieving and manipulating data. This is an instance of the DecafRepository class, initialized lazily in the repository getter. The repository is used to perform CRUD (Create, Read, Update, Delete) operations on the data model and provides methods for querying and filtering data based on specific criteria.
Repository instance for data layer operations.
IRepository.<M>
# protected _repository
Provides a connection to the data layer for retrieving and manipulating data. This is an instance of the DecafRepository class, initialized lazily in the repository getter. The repository is used to perform CRUD (Create, Read, Update, Delete) operations on the data model and provides methods for querying and filtering data based on specific criteria.
Repository instance for data layer operations.
# borders
Boolean flag that determines if the component should be visually outlined with borders. When true, borders are shown to visually separate the component from surrounding content.
Controls whether borders are displayed around the component.
boolean
# borders
Boolean flag that determines if the component should be visually outlined with borders. When true, borders are shown to visually separate the component from surrounding content.
Controls whether borders are displayed around the component.
# protected changeDetectorRef
Injected service that provides manual control over change detection cycles. This is essential for ensuring that programmatic DOM changes (like setting accordion attributes) are properly reflected in the component's state and trigger appropriate view updates when modifications occur outside the normal Angular change detection flow.
Angular change detection service for manual change detection control.
any
# protected changeDetectorRef
Injected service that provides manual control over change detection cycles. This is essential for ensuring that programmatic DOM changes (like setting accordion attributes) are properly reflected in the component's state and trigger appropriate view updates when modifications occur outside the normal Angular change detection flow.
Angular change detection service for manual change detection control.
# childOf
Specifies the identifier of the parent component in a hierarchical component structure. This property establishes a parent-child relationship between components, allowing for proper nesting and organization of components within a layout. It can be used to track component dependencies and establish component hierarchies for rendering and event propagation.
Parent component identifier for hierarchical component relationships.
string
|
undefined
# childOf
Specifies the identifier of the parent component in a hierarchical component structure. This property establishes a parent-child relationship between components, allowing for proper nesting and organization of components within a layout. It can be used to track component dependencies and establish component hierarchies for rendering and event propagation.
Parent component identifier for hierarchical component relationships.
# protected componentName
Stores the component's name which is used as a key for logging contexts and as a base for locale resolution.
Component name identifier for logging and localization contexts.
string
# protected componentName
Stores the component's name which is used as a key for logging contexts and as a base for locale resolution.
Component name identifier for logging and localization contexts.
# protected enableDarkMode
When enabled, the component will automatically detect the system's dark mode preference using the media service and apply appropriate styling classes. This flag controls whether the component should respond to dark mode changes and apply the dark palette class to its DOM element. By default, dark mode support is disabled.
Flag to enable or disable dark mode support for the component.
boolean
# protected enableDarkMode
When enabled, the component will automatically detect the system's dark mode preference using the media service and apply appropriate styling classes. This flag controls whether the component should respond to dark mode changes and apply the dark palette class to its DOM element. By default, dark mode support is disabled.
Flag to enable or disable dark mode support for the component.
# filter
Supply a custom AttributeOption to control how records are constrained. When omitted,
the directive derives a condition from filterBy or pk, comparing it against modelId.
Pre-built filtering expression applied to repository queries.
any
# filter
Supply a custom AttributeOption to control how records are constrained. When omitted,
the directive derives a condition from filterBy or pk, comparing it against modelId.
Pre-built filtering expression applied to repository queries.
# filterBy
Indicates which key should be compared to modelId when filter is not provided.
Defaults to the configured primary key so overrides are only needed for custom lookups.
Model field used when generating the default condition.
string
# filterBy
Indicates which key should be compared to modelId when filter is not provided.
Defaults to the configured primary key so overrides are only needed for custom lookups.
Model field used when generating the default condition.
# hidden
Can be a boolean or an array of operation keys where the field should be hidden.
Controls field visibility based on CRUD operations.
boolean
|
Array
# hidden
Can be a boolean or an array of operation keys where the field should be hidden.
Controls field visibility based on CRUD operations.
# initialized
Tracks whether the component has completed its initialization process. This flag is used to prevent duplicate initialization and to determine if certain operations that require initialization can be performed.
Initialization status flag for the component.
- Default Value:
- false
boolean
# protected initialized
Tracks whether the component has completed its initialization process. This flag is used to prevent duplicate initialization and to determine if certain operations that require initialization can be performed.
Initialization status flag for the component.
- Default Value:
- false
# protected isDarkMode
When enabled, the component will automatically detect the system's dark mode preference using the media service and apply appropriate styling classes. This flag controls whether the component should respond to dark mode changes and apply the dark palette class to its DOM element. By default, dark mode support is disabled.
Flag to enable or disable dark mode support for the component.
boolean
# protected isDarkMode
When enabled, the component will automatically detect the system's dark mode preference using the media service and apply appropriate styling classes. This flag controls whether the component should respond to dark mode changes and apply the dark palette class to its DOM element. By default, dark mode support is disabled.
Flag to enable or disable dark mode support for the component.
# item
Defines how list items should be rendered in the component. This property holds a configuration object that specifies the tag name and other properties needed to render list items correctly. The tag property identifies which component should be used to render each item in a list. Additional properties can be included to customize the rendering behavior.
Configuration for list item rendering behavior.
Record.<string, unknown>
# item
Defines how list items should be rendered in the component. This property holds a configuration object that specifies the tag name and other properties needed to render list items correctly. The tag property identifies which component should be used to render each item in a list. Additional properties can be included to customize the rendering behavior.
Configuration for list item rendering behavior.
string
# label
Provides a user-friendly label for the file upload input.
Label for the file upload field.
# locale
Specifies the locale code (e.g., 'en-US', 'pt-BR') used for translating UI text and formatting data according to regional conventions. This property can be set to override the default application locale for this specific component instance, enabling per-component localization when needed.
Current locale identifier for component internationalization.
string
# locale
Specifies the locale code (e.g., 'en-US', 'pt-BR') used for translating UI text and formatting data according to regional conventions. This property can be set to override the default application locale for this specific component instance, enabling per-component localization when needed.
Current locale identifier for component internationalization.
# protected localeRoot
Defines the base key used to resolve localization contexts for this component. If not explicitly provided, it defaults to the component's name. This key is used to load appropriate translation resources and locale-specific configurations.
Root key for component locale context resolution.
string
# protected localeRoot
Defines the base key used to resolve localization contexts for this component. If not explicitly provided, it defaults to the component's name. This key is used to load appropriate translation resources and locale-specific configurations.
Root key for component locale context resolution.
# location
Injected service that provides direct access to the browser's URL and history. Unlike the Router, Location allows for low-level manipulation of the browser's history stack and URL path, such as programmatically navigating back or forward, or updating the URL without triggering a route change. This is useful for scenarios where you need to interact with the browser history or URL outside of Angular's routing system, such as closing modals, handling popstate events, or supporting custom navigation logic.
Angular Location service.
any
# location
Injected service that provides direct access to the browser's URL and history. Unlike the Router, Location allows for low-level manipulation of the browser's history stack and URL path, such as programmatically navigating back or forward, or updating the URL without triggering a route change. This is useful for scenarios where you need to interact with the browser history or URL outside of Angular's routing system, such as closing modals, handling popstate events, or supporting custom navigation logic.
Angular Location service.
# model
The data model that this component will use for CRUD operations. This can be provided as a Model instance, a model constructor, or a string representing the model's registered name. When set, this property provides the component with access to the model's schema, validation rules, and metadata needed for rendering and data operations.
Data model or model name for component operations.
M
|
Model
|
string
|
undefined
# model
The data model that this component will use for CRUD operations. This can be provided as a Model instance, a model constructor, or a string representing the model's registered name. When set, this property provides the component with access to the model's schema, validation rules, and metadata needed for rendering and data operations.
Data model or model name for component operations.
# modelId
Specifies the primary key value for the current model record being displayed or manipulated by the component. This identifier is used for CRUD operations that target specific records, such as read, update, and delete operations. The value corresponds to the field designated as the primary key in the model definition.
Primary key value of the current model instance.
PrimaryKeyType
|
Array
# modelId
Specifies the primary key value for the current model record being displayed or manipulated by the component. This identifier is used for CRUD operations that target specific records, such as read, update, and delete operations. The value corresponds to the field designated as the primary key in the model definition.
Primary key value of the current model instance.
# name
Provides a string identifier that can be used to name or label the component instance. This name can be used for debugging purposes, logging, or to identify specific component instances within a larger application structure. It serves as a human-readable identifier that helps distinguish between multiple instances of the same component type.
Name identifier for the component instance.
string
# name
Provides a string identifier that can be used to name or label the component instance. This name can be used for debugging purposes, logging, or to identify specific component instances within a larger application structure. It serves as a human-readable identifier that helps distinguish between multiple instances of the same component type.
Name identifier for the component instance.
OperationKeys
# operation
Specifies which operation (Create, Read, Update, Delete) this component instance should perform. This determines the UI behavior, form configuration, and available actions. The operation affects form validation, field availability, and the specific repository method called during data submission.
The CRUD operation type to be performed on the model.
OperationKeys
# operation
Specifies which operation (Create, Read, Update, Delete) this component instance should perform. This determines the UI behavior, form configuration, and available actions. The operation affects form validation, field availability, and the specific repository method called during data submission.
The CRUD operation type to be performed on the model.
# pk
Specifies which field in the model should be used as the primary key. This is typically used for identifying unique records in operations like update and delete. If not explicitly set, it defaults to the repository's configured primary key or 'id'. 1
Primary key field name for the data model.
string
# pk
Specifies which field in the model should be used as the primary key. This is typically used for identifying unique records in operations like update and delete. If not explicitly set, it defaults to the repository's configured primary key or 'id'. 1
Primary key field name for the data model.
# props
Contains key-value pairs of dynamic properties that can be applied to the component at runtime. This flexible configuration object allows for dynamic property assignment without requiring explicit input bindings for every possible configuration option. Properties from this object are parsed and applied to the component instance through the parseProps method, enabling customizable component behavior based on external configuration.
Dynamic properties configuration for runtime customization.
Record.<string, unknown>
# props
Contains key-value pairs of dynamic properties that can be applied to the component at runtime. This flexible configuration object allows for dynamic property assignment without requiring explicit input bindings for every possible configuration option. Properties from this object are parsed and applied to the component instance through the parseProps method, enabling customizable component behavior based on external configuration.
Dynamic properties configuration for runtime customization.
# route
Defines the base route path used for navigation actions related to this component. This is often used as a prefix for constructing navigation URLs when transitioning between different operations or views. The route helps establish the component's position in the application's routing hierarchy.
Base route path for component navigation.
string
# route
Defines the base route path used for navigation actions related to this component. This is often used as a prefix for constructing navigation URLs when transitioning between different operations or views. The route helps establish the component's position in the application's routing hierarchy.
Base route path for component navigation.
# protected router
Injected Router service used for programmatic navigation between routes in the application. This service enables navigation to different views and operations, handles route parameters, and manages the browser's navigation history.
Router instance for programmatic navigation.
any
# protected router
Injected Router service used for programmatic navigation between routes in the application. This service enables navigation to different views and operations, handles route parameters, and manages the browser's navigation history.
Router instance for programmatic navigation.
# protected translateService
Injected service that provides translation capabilities for UI text. Used to translate button labels, validation messages, and other text content based on the current locale setting, enabling multilingual support throughout the application.
Translation service for application internationalization.
DecafTranslateService
# protected translateService
Injected service that provides translation capabilities for UI text. Used to translate button labels, validation messages, and other text content based on the current locale setting, enabling multilingual support throughout the application.
Translation service for application internationalization.
# uid
A unique identifier automatically generated for each component instance. This UID is used for DOM element identification, component tracking, and debugging purposes. By default, it generates a random 16-character value, but it can be explicitly set via input.
Unique identifier for the component instance.
PrimaryKeyType
# uid
A unique identifier automatically generated for each component instance. This UID is used for DOM element identification, component tracking, and debugging purposes. By default, it generates a random 16-character value, but it can be explicitly set via input.
Unique identifier for the component instance.
# value
Can be a string, number, date, or array of string or objects.
Current value of the component.
any
# value
Can be a string, number, date, or array of string or objects.
Current value of the component.
Methods
# async initialize(args)
Asynchronously initializes the component with the provided arguments.
Asynchronously initializes the component with the provided arguments.
This method sets the initialized property to true once the initialization is complete.
Parameters:
| Name | Type | Description |
|---|---|---|
args |
A variable number of arguments of unknown types that can be used for initialization. |
A promise that resolves when the initialization is complete.
# protected parseEvents(events, instance) → {UIEventProperty}
Processes an events map produced by decorators where each value can be a factory returning a function or a component constructor. When a constructor is returned, the method matching the event key is instantiated and stored; otherwise the produced function is assigned directly. This enables flexible event binding definitions for derived components.
Registers event callbacks on the component instance.
Parameters:
| Name | Type | Description |
|---|---|---|
events |
Dictionary of event names mapped to function factories or component constructors. |
|
instance |
Optional component instance to receive the events; defaults to |
UIEventProperty
# protected parseHandlers(handlers, instance) → {UIEventProperty}
Iterates through a handlers map and ensures each entry is stored as a callable
function on the component. Plain functions are stored directly, while handler classes are
instantiated so their handle method (or a keyed override) becomes the registered handler.
This allows decorators to accept either inline functions or handler classes transparently.
Normalizes handler definitions into executable functions.
Parameters:
| Name | Type | Description |
|---|---|---|
handlers |
Dictionary of handler names mapped to functions or handler constructors. |
|
instance |
Optional target handler instance; defaults to the current component. |
UIEventProperty
# async submit(args)
Submits data or performs an action associated with the component.
Submits data or performs an action associated with the component.
Parameters:
| Name | Type | Description |
|---|---|---|
args |
A variable number of arguments of any type to be passed to the submit operation. |
A promise that resolves with the result of the submit operation.
# async translate(args)
Translates content based on the provided arguments.
Translates content based on the provided arguments. Logs the translation request with the component name and arguments.
Parameters:
| Name | Type | Description |
|---|---|---|
args |
A variable number of arguments used for translation. |
A promise that resolves with the translation result.