Module

lib/engine/NgxComponentDirective

Base decaf component abstraction providing shared inputs and utilities.

View Source lib/engine/NgxComponentDirective.ts, line 11

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 454

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.

View Source lib/engine/NgxComponentDirective.ts, line 1114

string | undefined

# 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.

View Source lib/engine/NgxComponentDirective.ts, line 988

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:
  • ""

View Source lib/engine/NgxComponentDirective.ts, line 1101

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

View Source lib/engine/NgxComponentDirective.ts, line 1089

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.

View Source lib/engine/NgxComponentDirective.ts, line 938

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

View Source lib/engine/NgxComponentDirective.ts, line 952

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

View Source lib/engine/NgxComponentDirective.ts, line 966

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

View Source lib/engine/NgxComponentDirective.ts, line 1273

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: ""}

View Source lib/engine/NgxComponentDirective.ts, line 1210

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.

View Source lib/engine/NgxComponentDirective.ts, line 1164

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.

View Source lib/engine/NgxComponentDirective.ts, line 1197

# 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.

View Source lib/engine/NgxComponentDirective.ts, line 437

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:
  • {}

View Source lib/engine/NgxComponentDirective.ts, line 1043

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.

View Source lib/engine/NgxComponentDirective.ts, line 1129

Model | string | undefined

# static NgxComponentDirective#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.

View Source lib/engine/NgxComponentDirective.ts, line 1010

EventIds

# static NgxComponentDirective#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.

View Source lib/engine/NgxComponentDirective.ts, line 1021

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.

View Source lib/engine/NgxComponentDirective.ts, line 977

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

View Source lib/engine/NgxComponentDirective.ts, line 1067

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]

View Source lib/engine/NgxComponentDirective.ts, line 1054

string

# static NgxComponentDirective#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'.

Primary key field name for the data model.

Default Value:
  • 'id'

View Source lib/engine/NgxComponentDirective.ts, line 1032

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:
  • {}

View Source lib/engine/NgxComponentDirective.ts, line 1223

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.

View Source lib/engine/NgxComponentDirective.ts, line 1175

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.

View Source lib/engine/NgxComponentDirective.ts, line 1141

# 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.

View Source lib/engine/NgxComponentDirective.ts, line 450

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.

View Source lib/engine/NgxComponentDirective.ts, line 1234

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.

View Source lib/engine/NgxComponentDirective.ts, line 1186

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

View Source lib/engine/NgxComponentDirective.ts, line 1078

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.

View Source lib/engine/NgxComponentDirective.ts, line 1153

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)

View Source lib/engine/NgxComponentDirective.ts, line 999

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.

View Source lib/engine/NgxComponentDirective.ts, line 224

string | undefined

# 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.

View Source lib/engine/NgxComponentDirective.ts, line 109

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:
  • ""

View Source lib/engine/NgxComponentDirective.ts, line 213

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

View Source lib/engine/NgxComponentDirective.ts, line 202

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.

View Source lib/components/icon/icon.component.ts, line 24

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.

View Source lib/engine/NgxComponentDirective.ts, line 65

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

View Source lib/engine/NgxComponentDirective.ts, line 77

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

View Source lib/engine/NgxComponentDirective.ts, line 89

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

View Source lib/engine/NgxComponentDirective.ts, line 366

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: ""}

View Source lib/engine/NgxComponentDirective.ts, line 309

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.

View Source lib/engine/NgxComponentDirective.ts, line 267

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.

View Source lib/engine/NgxComponentDirective.ts, line 297

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:
  • {}

View Source lib/engine/NgxComponentDirective.ts, line 160

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.

View Source lib/engine/NgxComponentDirective.ts, line 237

Model | string | undefined

# static 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.

View Source lib/engine/NgxComponentDirective.ts, line 129

EventIds

# static 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.

View Source lib/engine/NgxComponentDirective.ts, line 139

EventIds

# static 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.

View Source lib/engine/NgxModelPageDirective.ts, line 26

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.

View Source lib/engine/NgxComponentDirective.ts, line 99

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

View Source lib/engine/NgxComponentDirective.ts, line 182

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 49

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 lib/engine/NgxComponentDirective.ts, line 170

string

# static 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'.

Primary key field name for the data model.

Default Value:
  • 'id'

View Source lib/engine/NgxComponentDirective.ts, line 150

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:
  • {}

View Source lib/engine/NgxComponentDirective.ts, line 321

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.

View Source lib/engine/NgxComponentDirective.ts, line 277

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.

View Source lib/engine/NgxComponentDirective.ts, line 247

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.

View Source lib/engine/NgxComponentDirective.ts, line 331

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.

View Source lib/engine/NgxComponentDirective.ts, line 287

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

View Source lib/engine/NgxComponentDirective.ts, line 192

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.

View Source lib/engine/NgxComponentDirective.ts, line 257

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)

View Source lib/engine/NgxComponentDirective.ts, line 119

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.

sequenceDiagram participant U as UI participant D as NgxComponentDirective participant R as Router U->>D: Click operation button D->>D: changeOperation(operation, id) D->>D: Construct navigation URL Note over D: URL: {route}/{operation}/{id?} D->>R: navigateByUrl(page) R->>R: Navigate to new route R-->>D: Return navigation result D-->>U: Display new operation view
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

View Source lib/engine/NgxComponentDirective.ts, line 1563

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

View Source lib/engine/NgxComponentDirective.ts, line 1380

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

View Source lib/engine/NgxComponentDirective.ts, line 1404

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.

View Source lib/engine/NgxComponentDirective.ts, line 1391

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.

sequenceDiagram participant C as Child Component participant D as NgxComponentDirective participant H as Event Handler participant P as Parent Component C->>D: handleEvent(event) alt Event is CustomEvent D->>D: Extract event.detail end D->>D: Get event name and handlers alt Handlers defined alt Handler exists for event D->>H: new Handler(router) D->>H: handle(event) H-->>D: return result else No handler found D->>D: log.debug("No handler found") end else No handlers D->>P: listenEvent.emit(event) end
Parameters:
Name Type Description
event IBaseCustomEvent | ICrudFormEvent | CustomEvent

The event to handle

View Source lib/engine/NgxComponentDirective.ts, line 1509

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.

sequenceDiagram participant D as NgxComponentDirective participant U as UI U->>D: isAllowed(operation) alt operations is undefined D-->>U: Return false else D->>D: Check if operation is in operations D->>D: Check if operation is not current operation D-->>U: Return result end
Parameters:
Name Type Description
operation string

The operation to check

View Source lib/engine/NgxComponentDirective.ts, line 1534

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.

View Source lib/engine/NgxComponentDirective.ts, line 1326

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

View Source lib/engine/NgxComponentDirective.ts, line 1351

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.

sequenceDiagram participant C as Component participant D as NgxComponentDirective participant P as Props Object C->>D: parseProps(instance, skip) D->>D: Get Object.keys(instance) loop For each key in instance D->>D: Check if key in skip array alt Key not in skip D->>P: Check if key exists in this.props alt Key exists in props D->>D: Set this[key] = this.props[key] D->>P: delete this.props[key] else Key not in props Note over D: Skip this key end end end
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

View Source lib/engine/NgxComponentDirective.ts, line 1456

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.

View Source lib/engine/NgxComponentDirective.ts, line 1338

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

View Source lib/engine/NgxComponentDirective.ts, line 1417

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

View Source lib/engine/NgxComponentDirective.ts, line 1472

A unique identifier for the item

string | number

# async protected 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

View Source lib/engine/NgxComponentDirective.ts, line 1367

A promise that resolves to the translated text

Promise.<string>