Base decaf component abstraction providing shared inputs and utilities.
Classes
- NgxComponentDirective
Abstract base class that provides common functionality for all Decaf components. This directive establishes a foundation for component development by offering shared inputs (model, mapper, pk, props), logging infrastructure, repository access, event handling, and internationalization support. It implements OnChanges to respond to input property changes and includes utilities for navigation, localization, and dynamic property binding. All Decaf components should extend this directive to inherit its foundational capabilities.
- NgxComponentDirective
Initializes the directive by setting up the component name, locale root, and logger. Calls the parent LoggedClass constructor and configures localization context. The component name and locale root can be optionally injected via the CPTKN token, otherwise defaults are used.
- NgxComponentDirective#NgxComponentDirective
Initializes the directive by setting up the component name, locale root, and logger. Calls the parent LoggedClass constructor and configures localization context. The component name and locale root can be optionally injected via the CPTKN token, otherwise defaults are used.
Members
Array.<CrudOperations>
# static HeaderComponent#operations
Defines which CRUD operations (Create, Read, Update, Delete) are available for this component. This affects which operations can be performed on the data and which operation buttons are displayed in the UI. By default, only READ operations are enabled.
Available CRUD operations for this component instance.
- Default Value:
- [OperationKeys.READ]
View Source app/components/header/header.component.ts, line 478
ChangeDetectorRef
# protected static NgxComponentDirective#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.
string
# static NgxComponentDirective#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
# static NgxComponentDirective#className
Allows custom CSS classes to be added to the component's root element. These classes are appended to any automatically generated classes based on other component properties. Multiple classes can be provided as a space-separated string. This provides a way to customize the component's appearance beyond the built-in styling options.
Additional CSS class names for component styling.
- Default Value:
- ""
number
# static NgxComponentDirective#col
Specifies the column position of this component when rendered within a grid-based layout. This property is used for positioning components in multi-row, multi-column layouts and helps establish the component's horizontal placement within the grid structure.
Column position in a grid-based layout system.
- Default Value:
- 1
ElementRef
# static NgxComponentDirective#component
Provides direct access to the native DOM element of the component through Angular's ViewChild decorator. This reference can be used to manipulate the DOM element directly, apply custom styles, or access native element properties and methods. The element is identified by the 'component' template reference variable.
Reference to the component's native DOM element.
boolean
# protected static NgxComponentDirective#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.
- Default Value:
- false
AttributeOption.<Model>
|
undefined
# static NgxComponentDirective#formGroup
Provides an optional set of conditions used to filter the repository query that supplies data to this component. When present, the condition constrains the model lookup (e.g., WHERE clauses) so only records matching the specified criteria are fetched, enabling contextualized reads such as filtering by status, tenant, or foreign keys. This is especially useful when the component should render or operate on a subset of records rather than a single primary-key match.
Query predicate applied when resolving model data.
boolean
# protected static NgxComponentDirective#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.
- Default Value:
- false
boolean
# protected static NgxComponentDirective#isModalChild
Determines whether this component instance is being displayed within a modal context. This flag affects component behavior such as navigation patterns, event handling, and lifecycle management. When true, the component may use different navigation strategies (e.g., closing the modal instead of browser navigation) and adjust its layout to fit modal constraints. This is typically set by parent modal containers when instantiating child components.
Flag indicating if the component is rendered as a child of a modal dialog.
- Default Value:
- false
Record.<string, FieldDefinition>
# static NgxComponentDirective#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.
- Default Value:
- {tag: ""}
EventEmitter.<IBaseCustomEvent>
# static NgxComponentDirective#listenEvent
Emits custom events that occur within child components or the component itself. This allows parent components to listen for and respond to user interactions or state changes. Events are passed up the component hierarchy to enable coordinated behavior across the application.
Event emitter for custom component events.
LoadingController
# protected static NgxComponentDirective#loadingController
Provides convenient access to Ionic's LoadingController, enabling directive subclasses to create, present, and dismiss loading overlays without wiring the service themselves. Use this helper to surface async progress indicators tied to CRUD operations, navigation, or any long-running UI task.
Ionic loading overlay manager available to derived components.
string
|
undefined
# static NgxComponentDirective#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.
# static NgxComponentDirective#localeContext
Returns the current locale identifier by calling the getLocale method. This property provides convenient access to the component's active locale setting.
Getter for the current locale context identifier.
Record.<string, string>
|
FunctionLike
|
Record.<string, FunctionLike>
# static NgxComponentDirective#mapper
Defines how fields from the data model should be mapped to properties used by the component. This allows for flexible data binding between the model and the component's display logic. Can be provided as a static object mapping or as a function for dynamic mapping transformations.
Field mapping configuration object or function.
- Default Value:
- {}
NgxMediaService
# protected static NgxComponentDirective#mediaService
Provides access to media query functionality for detecting and responding to different screen sizes and device capabilities. This service enables components to adapt their behavior and presentation based on viewport dimensions, orientation, and other media features. It manages media query listeners and provides utilities for responsive component rendering. The service is instantiated per component and should be destroyed via ngOnDestroy to prevent memory leaks.
Media service instance for responsive design and media query management.
string
# static NgxComponentDirective#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
# static NgxComponentDirective#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.
- Default Value:
- OperationKeys.READ
Array.<CrudOperations>
# static NgxComponentDirective#operations
Defines which CRUD operations (Create, Read, Update, Delete) are available for this component. This affects which operations can be performed on the data and which operation buttons are displayed in the UI. By default, only READ operations are enabled.
Available CRUD operations for this component instance.
- Default Value:
- [OperationKeys.READ]
Record.<string, unknown>
# static NgxComponentDirective#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.
- Default Value:
- {}
EventEmitter.<IBaseCustomEvent>
# static NgxComponentDirective#refreshEvent
Emits custom events that occur within child components or the component itself. This allows parent components to listen for and respond to user interactions or state changes. Events are passed up the component hierarchy to enable coordinated behavior across the application.
Event emitter for custom component events.
Renderer2
# protected static NgxComponentDirective#renderer
Injected service that provides a safe, platform-agnostic way to manipulate DOM elements. This service ensures proper handling of DOM operations across different platforms and environments, including server-side rendering and web workers, without direct DOM access.
Angular Renderer2 service for platform-agnostic DOM manipulation.
# protected static NgxComponentDirective#repository
Lazily initializes and returns the DecafRepository instance for the current model. This getter ensures the repository is created only when needed and reused for subsequent access. It also automatically sets the primary key field if not explicitly configured.
Getter for the data repository instance.
string
# static NgxComponentDirective#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.
Router
# protected static NgxComponentDirective#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.
Angular Router instance for programmatic navigation.
number
# static NgxComponentDirective#row
Specifies the row position of this component when rendered within a grid-based layout. This property is used for positioning components in multi-row, multi-column layouts and helps establish the component's vertical placement within the grid structure.
Row position in a grid-based layout system.
- Default Value:
- 1
boolean
# static NgxComponentDirective#translatable
Indicates whether the field labels should be translated based on the current language settings. This is useful for applications supporting multiple languages.
Translatability of field labels.
- Default Value:
- true
TranslateService
# protected static NgxComponentDirective#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.
string
|
number
# static NgxComponentDirective#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.
- Default Value:
- generateRandomValue(16)
unknown
# static NgxComponentDirective#value
Holds the data payload bound to the component (for example, the field value in a form control or the record currently being edited). The directive treats this input as an opaque value and passes it through to child components or handlers, allowing each component implementation to interpret the value according to its own semantics (e.g., scalar, object, or collection). This is not tied to any primary key; it simply mirrors whatever data the host template provides.
Backing value supplied to the component instance.
ChangeDetectorRef
# protected static 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.
string
# static 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
# static className
Allows custom CSS classes to be added to the component's root element. These classes are appended to any automatically generated classes based on other component properties. Multiple classes can be provided as a space-separated string. This provides a way to customize the component's appearance beyond the built-in styling options.
Additional CSS class names for component styling.
- Default Value:
- ""
number
# static col
Specifies the column position of this component when rendered within a grid-based layout. This property is used for positioning components in multi-row, multi-column layouts and helps establish the component's horizontal placement within the grid structure.
Column position in a grid-based layout system.
- Default Value:
- 1
ElementRef
# static component
Provides direct access to the native DOM element of the component through Angular's ViewChild decorator. This reference can be used to manipulate the DOM element directly, apply custom styles, or access native element properties and methods. The element is identified by the 'component' template reference variable.
Reference to the component's native DOM element.
ElementRef
# static component
Provides direct access to the native DOM element of the component through Angular's ViewChild decorator. This reference can be used to manipulate the DOM element directly, apply custom styles, or access native element properties and methods. The element is identified by the 'component' template reference variable.
Reference to the component's native DOM element.
boolean
# protected static 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.
- Default Value:
- false
boolean
# protected static 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.
- Default Value:
- false
boolean
# protected static isModalChild
Determines whether this component instance is being displayed within a modal context. This flag affects component behavior such as navigation patterns, event handling, and lifecycle management. When true, the component may use different navigation strategies (e.g., closing the modal instead of browser navigation) and adjust its layout to fit modal constraints. This is typically set by parent modal containers when instantiating child components.
Flag indicating if the component is rendered as a child of a modal dialog.
- Default Value:
- false
Record.<string, FieldDefinition>
# static 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.
- Default Value:
- {tag: ""}
EventEmitter.<IBaseCustomEvent>
# static listenEvent
Emits custom events that occur within child components or the component itself. This allows parent components to listen for and respond to user interactions or state changes. Events are passed up the component hierarchy to enable coordinated behavior across the application.
Event emitter for custom component events.
LoadingController
# static loadingController
Provides convenient access to Ionic's LoadingController, enabling directive subclasses to create, present, and dismiss loading overlays without wiring the service themselves. Use this helper to surface async progress indicators tied to CRUD operations, navigation, or any long-running UI task.
Ionic loading overlay manager available to derived components.
string
|
undefined
# static 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.
Record.<string, string>
|
FunctionLike
|
Record.<string, FunctionLike>
# static mapper
Defines how fields from the data model should be mapped to properties used by the component. This allows for flexible data binding between the model and the component's display logic. Can be provided as a static object mapping or as a function for dynamic mapping transformations.
Field mapping configuration object or function.
- Default Value:
- {}
NgxMediaService
# protected static mediaService
Provides access to media query functionality for detecting and responding to different screen sizes and device capabilities. This service enables components to adapt their behavior and presentation based on viewport dimensions, orientation, and other media features. It manages media query listeners and provides utilities for responsive component rendering. The service is instantiated per component and should be destroyed via ngOnDestroy to prevent memory leaks.
Media service instance for responsive design and media query management.
string
# static 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
# static 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.
- Default Value:
- OperationKeys.READ
Array.<CrudOperations>
# static operations
Defines which CRUD operations (Create, Read, Update, Delete) are available for this component. This affects which operations can be performed on the data and which operation buttons are displayed in the UI. By default, only READ operations are enabled.
Available CRUD operations for this component instance.
- Default Value:
- [OperationKeys.READ]
View Source app/components/header/header.component.ts, line 50
Array.<CrudOperations>
# static operations
Defines which CRUD operations (Create, Read, Update, Delete) are available for this component. This affects which operations can be performed on the data and which operation buttons are displayed in the UI. By default, only READ operations are enabled.
Available CRUD operations for this component instance.
- Default Value:
- [OperationKeys.READ]
Record.<string, unknown>
# static 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.
- Default Value:
- {}
EventEmitter.<IBaseCustomEvent>
# static refreshEvent
Emits custom events that occur within child components or the component itself. This allows parent components to listen for and respond to user interactions or state changes. Events are passed up the component hierarchy to enable coordinated behavior across the application.
Event emitter for custom component events.
Renderer2
# protected static renderer
Injected service that provides a safe, platform-agnostic way to manipulate DOM elements. This service ensures proper handling of DOM operations across different platforms and environments, including server-side rendering and web workers, without direct DOM access.
Angular Renderer2 service for platform-agnostic DOM manipulation.
string
# static 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.
Router
# protected static 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.
Angular Router instance for programmatic navigation.
number
# static row
Specifies the row position of this component when rendered within a grid-based layout. This property is used for positioning components in multi-row, multi-column layouts and helps establish the component's vertical placement within the grid structure.
Row position in a grid-based layout system.
- Default Value:
- 1
boolean
# static translatable
Indicates whether the field labels should be translated based on the current language settings. This is useful for applications supporting multiple languages.
Translatability of field labels.
- Default Value:
- true
TranslateService
# protected static 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.
string
|
number
# static 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.
- Default Value:
- generateRandomValue(16)
unknown
# static value
Holds the data payload bound to the component (for example, the field value in a form control or the record currently being edited). The directive treats this input as an opaque value and passes it through to child components or handlers, allowing each component implementation to interpret the value according to its own semantics (e.g., scalar, object, or collection). This is not tied to any primary key; it simply mirrors whatever data the host template provides.
Backing value supplied to the component instance.
Methods
# async static NgxComponentDirective#changeOperation(operation, idopt) → {Promise.<boolean>}
This method constructs a navigation URL based on the component's base route, the requested operation, and optionally a model ID. It then uses the Angular router service to navigate to the constructed URL. This is typically used when switching between different CRUD operations (create, read, update, delete) on a model. The URL format is: {route}/{operation}/{id?}
Navigates to a different operation for the current model.
Parameters:
| Name | Type | Attributes | Description |
|---|---|---|---|
operation |
string
|
The operation to navigate to (e.g., 'create', 'read', 'update', 'delete') |
|
id |
string
|
<optional> |
Optional model ID to include in the navigation URL |
A promise that resolves to true if navigation was successful
Promise.<boolean>
# protected static NgxComponentDirective#getLocale(localeopt) → {string}
Gets the locale identifier from the locale context system. If a locale parameter is provided, it updates the localeRoot property and resolves the new locale context. If no locale is currently set, it initializes it from the localeRoot.
Retrieves or sets the locale context for the component.
Parameters:
| Name | Type | Attributes | Description |
|---|---|---|---|
locale |
string
|
<optional> |
Optional locale identifier to set |
The current locale identifier
string
# static NgxComponentDirective#getModel(model) → {void}
Accepts a model in multiple formats (string name, Model instance, or ModelConstructor) and resolves it to a Model instance. When a string is provided, it looks up the model by name in the Model registry. After resolution, it delegates to setModelDefinitions to complete the model initialization and configuration.
Resolves and initializes a model from various input formats.
Parameters:
| Name | Type | Description |
|---|---|---|
model |
string
|
Model
|
ModelConstructor.<M>
|
The model to resolve and initialize |
void
# static NgxComponentDirective#getRoute() → {string}
Gets the navigation route associated with this component. If no route is explicitly
set and a model is available, it automatically generates a route based on the model's
class name using the pattern /model/{ModelName}. Returns an empty string if neither
a route nor a model is available.
Retrieves or generates the route path for the component.
The route path for this component
string
# async static NgxComponentDirective#handleEvent(event) → {Promise.<void>}
Processes custom events by extracting event handlers and delegating to appropriate handler classes. Supports both CustomEvent format with detail property and direct event objects. If specific handlers are defined in the event, it instantiates the handler class and invokes its handle method. If no handler is found or defined, the event is emitted up the component hierarchy via the listenEvent output.
Handles custom events from child components or DOM elements.
Parameters:
| Name | Type | Description |
|---|---|---|
event |
IBaseCustomEvent
|
ICrudFormEvent
|
CustomEvent
|
The event to handle |
A promise that resolves when event handling is complete
Promise.<void>
# static NgxComponentDirective#isAllowed(operation) → {boolean}
This method checks if an operation is included in the list of available CRUD operations and if it's not the current operation (unless the current operation is CREATE). This is used to enable/disable or show/hide operation buttons in the UI. Returns false if the operations array is undefined or the operation is not in the list.
Determines if a specific operation is allowed in the current context.
Parameters:
| Name | Type | Description |
|---|---|---|
operation |
string
|
The operation to check |
True if the operation is allowed, false otherwise
boolean
# static NgxComponentDirective#localeContext() → {string}
Returns the current locale identifier by calling the getLocale method. This property provides convenient access to the component's active locale setting.
Getter for the current locale context identifier.
The current locale identifier
string
# async static NgxComponentDirective#ngOnChanges(changes) → {void}
Responds to changes in component input properties, specifically monitoring changes to the model, locale root, and component name properties. When the model changes, it triggers model initialization and locale context updates. When locale-related properties change, it updates the component's locale setting accordingly.
Angular lifecycle hook for handling input property changes.
Parameters:
| Name | Type | Description |
|---|---|---|
changes |
SimpleChanges
|
Object containing the changed properties with their previous and current values |
void
# protected static NgxComponentDirective#parseProps(instance, skipopt) → {void}
This method iterates through the properties of the provided instance object and applies any matching properties from the component's props configuration to the component instance. This allows for dynamic property assignment based on configuration stored in the props object, enabling flexible component customization without requiring explicit property binding for every possible configuration option. The method performs a safe property assignment by checking if each key from the instance exists in the props object before applying it. This prevents accidental property overwriting and ensures only intended properties are modified.
Parses and applies properties from the props object to the component instance.
Parameters:
| Name | Type | Attributes | Default | Description |
|---|---|---|---|---|
instance |
KeyValue
|
The component instance object to process |
||
skip |
Array.<string>
|
<optional> |
[] | Array of property names to skip during parsing |
void
# protected static NgxComponentDirective#repository() → {DecafRepository.<Model>}
Lazily initializes and returns the DecafRepository instance for the current model. This getter ensures the repository is created only when needed and reused for subsequent access. It also automatically sets the primary key field if not explicitly configured.
Getter for the data repository instance.
If repository initialization fails
InternalError
The repository instance for the current model
DecafRepository.<Model>
# static NgxComponentDirective#setModelDefinitions(model) → {void}
Extracts rendering configuration from the model's decorators using the rendering engine. This includes props, item configuration, and child component definitions. It sets up the mapper for field transformations, configures the item renderer with appropriate properties, and establishes the route for navigation. This method bridges the model's decorator metadata with the component's runtime configuration.
Configures component properties based on model decorators and metadata.
Parameters:
| Name | Type | Description |
|---|---|---|
model |
Model
|
The model instance to extract definitions from |
void
# protected static NgxComponentDirective#trackItemFn(index, item) → {string|number}
Provides a tracking function for Angular's *ngFor directive to optimize rendering performance. This method generates unique identifiers for list items based on their index and content, allowing Angular to efficiently track changes and minimize DOM manipulations during list updates. The tracking function is essential for maintaining component state and preventing unnecessary re-rendering of unchanged items.
Tracks items in ngFor loops for optimal change detection performance.
Parameters:
| Name | Type | Description |
|---|---|---|
index |
number
|
The index of the item in the list |
item |
KeyValue
|
string
|
number
|
The item data to track |
A unique identifier for the item
string
|
number
# async static NgxComponentDirective#translate(phrase, paramsopt) → {Promise.<string>}
Provides a promise-based wrapper around the translation service to translate UI text based on the current locale. Supports both single phrases and arrays of phrases, and accepts optional parameters for template interpolation. When a string parameter is provided, it's automatically converted to an object format for the translation service.
Translates text phrases using the translation service.
Parameters:
| Name | Type | Attributes | Description |
|---|---|---|---|
phrase |
string
|
Array.<string>
|
The translation key or array of keys to translate |
|
params |
object
|
string
|
<optional> |
Optional parameters for interpolation in translated text |
A promise that resolves to the translated text
Promise.<string>