# new NgxParentComponentDirective()
This component provides a flexible grid system that can be configured with dynamic rows and columns. It supports responsive breakpoints and can render child components within the grid structure. The component extends NgxComponentDirective to inherit common functionality and integrates with the model and component renderer systems.
Layout component for creating responsive grid layouts in Angular applications.
- Implements:
- OnInit
View Source lib/engine/NgxParentComponentDirective.ts, line 20
Extends
Members
number
# activeIndex
Tracks which page of the multi-step form is currently being displayed. This property is updated as users navigate through the form steps using the next/back buttons or programmatic navigation.
The currently active page number.
number
# activeIndex
Tracks which page of the multi-step form is currently being displayed. This property is updated as users navigate through the form steps using the next/back buttons or programmatic navigation.
The currently active page number.
UIModelMetadata
|
Array.<UIModelMetadata>
|
FieldDefinition
|
Array.<FieldDefinition>
|
undefined
# activePage
Contains only the UI model metadata for fields that should be displayed on the currently active page. This is a filtered subset of the children array, updated whenever the user navigates between pages.
Array of UI model metadata for the currently active page.
UIModelMetadata
|
Array.<UIModelMetadata>
|
FieldDefinition
|
Array.<FieldDefinition>
|
undefined
# activePage
Contains only the UI model metadata for fields that should be displayed on the currently active page. This is a filtered subset of the children array, updated whenever the user navigates between pages.
Array of UI model metadata for the currently active page.
UIMediaBreakPointsType
# breakpoint
Determines the responsive breakpoint at which the layout should adapt. This affects how the grid behaves on different screen sizes, allowing for mobile-first or desktop-first responsive design patterns. The breakpoint is automatically processed to ensure compatibility with the UI framework.
Media breakpoint for responsive behavior.
- Default Value:
- 'medium'
View Source lib/engine/NgxParentComponentDirective.ts, line 136
UIMediaBreakPointsType
# breakpoint
Determines the responsive breakpoint at which the layout should adapt. This affects how the grid behaves on different screen sizes, allowing for mobile-first or desktop-first responsive design patterns. The breakpoint is automatically processed to ensure compatibility with the UI framework.
Media breakpoint for responsive behavior.
- Default Value:
- 'medium'
View Source lib/engine/NgxParentComponentDirective.ts, line 348
'default'
|
'small'
|
'blank'
# cardBody
Specifies the appearance of the card body, allowing customization between default, small, or blank styles. This input is used to control the visual presentation of the card content.
Defines the body style of the card.
- Default Value:
- 'default'
View Source lib/engine/NgxParentComponentDirective.ts, line 116
'default'
|
'small'
|
'blank'
# cardBody
Specifies the appearance of the card body, allowing customization between default, small, or blank styles. This input is used to control the visual presentation of the card content.
Defines the body style of the card.
- Default Value:
- 'default'
View Source lib/engine/NgxParentComponentDirective.ts, line 326
'clear'
|
'shadow'
# cardType
Determines the card's visual style, such as clear or shadowed. This input allows for flexible styling of the card component to match different design requirements.
Specifies the type of the card.
- Default Value:
- 'clear'
View Source lib/engine/NgxParentComponentDirective.ts, line 125
'clear'
|
'shadow'
# cardType
Determines the card's visual style, such as clear or shadowed. This input allows for flexible styling of the card component to match different design requirements.
Specifies the type of the card.
- Default Value:
- 'clear'
View Source lib/engine/NgxParentComponentDirective.ts, line 336
Array.<UIModelMetadata>
# children
Contains the complete collection of UI model metadata that defines the structure, validation, and presentation of form fields across all pages. Each metadata object contains information about field type, validation rules, page assignment, and display properties.
Array of UI model metadata for all form fields.
Array.<UIModelMetadata>
# children
Contains the complete collection of UI model metadata that defines the structure, validation, and presentation of form fields across all pages. Each metadata object contains information about field type, validation rules, page assignment, and display properties.
Array of UI model metadata for all form fields.
number
|
Array.<string>
# cols
Defines the column structure of the grid. When a number is provided, it creates that many equal-width columns. When an array is provided, each element can define specific column properties or sizing. This allows for flexible grid layouts that can adapt to different content requirements.
Number of columns or array of column definitions for the grid layout.
- Default Value:
- 1
View Source lib/engine/NgxParentComponentDirective.ts, line 97
number
|
Array.<string>
# cols
Defines the column structure of the grid. When a number is provided, it creates that many equal-width columns. When an array is provided, each element can define specific column properties or sizing. This allows for flexible grid layouts that can adapt to different content requirements.
Number of columns or array of column definitions for the grid layout.
- Default Value:
- 1
View Source lib/engine/NgxParentComponentDirective.ts, line 305
boolean
# match
Boolean flag that controls whether the component should adapt its layout to match its parent. When true, the component will attempt to align or size itself according to the parent container.
Determines if the layout should match the parent container's size or configuration.
- Default Value:
- true
View Source lib/engine/NgxParentComponentDirective.ts, line 145
boolean
# match
Boolean flag that controls whether the component should adapt its layout to match its parent. When true, the component will attempt to align or size itself according to the parent container.
Determines if the layout should match the parent container's size or configuration.
- Default Value:
- true
View Source lib/engine/NgxParentComponentDirective.ts, line 358
string
|
number
# page
A unique identifier for the current record being displayed or manipulated. This is typically used in conjunction with the primary key for operations on specific records.
Unique identifier for the current record.
string
|
number
# page
A unique identifier for the current record being displayed or manipulated. This is typically used in conjunction with the primary key for operations on specific records.
Unique identifier for the current record.
string
|
number
# pages
A unique identifier for the current record being displayed or manipulated. This is typically used in conjunction with the primary key for operations on specific records.
Unique identifier for the current record.
string
|
number
# pages
A unique identifier for the current record being displayed or manipulated. This is typically used in conjunction with the primary key for operations on specific records.
Unique identifier for the current record.
FormParent
# parentForm
This input binds the parent form object to the directive, enabling hierarchical form structures. It allows the directive to interact with the parent form and manage child components effectively.
The parent form object that represents the parent-child relationship in the form hierarchy.
FormParent
# parentForm
This input binds the parent form object to the directive, enabling hierarchical form structures. It allows the directive to interact with the parent form and manage child components effectively.
The parent form object that represents the parent-child relationship in the form hierarchy.
Array.<any>
# preloadCards
Used to create an array of placeholder elements for card components, typically to reserve space or trigger rendering logic before actual data is loaded.
Preloads card placeholders for rendering.
- Default Value:
- [undefined]
View Source lib/engine/NgxParentComponentDirective.ts, line 154
Array.<any>
# preloadCards
Used to create an array of placeholder elements for card components, typically to reserve space or trigger rendering logic before actual data is loaded.
Preloads card placeholders for rendering.
- Default Value:
- [undefined]
View Source lib/engine/NgxParentComponentDirective.ts, line 368
number
|
Array.<string>
# rows
Defines the row structure of the grid. When a number is provided, it creates that many equal-height rows. When an array is provided, each element can define specific row properties or sizing. This provides control over vertical spacing and content organization.
Number of rows or array of row definitions for the grid layout.
- Default Value:
- 1
View Source lib/engine/NgxParentComponentDirective.ts, line 107
number
|
Array.<string>
# rows
Defines the row structure of the grid. When a number is provided, it creates that many equal-height rows. When an array is provided, each element can define specific row properties or sizing. This provides control over vertical spacing and content organization.
Number of rows or array of row definitions for the grid layout.
- Default Value:
- 1
View Source lib/engine/NgxParentComponentDirective.ts, line 316