# new ModelPage(operation, modelName, modelId)
The ModelPage component provides a comprehensive interface for performing Create, Read, Update, and Delete operations on any registered model entity within the Decaf framework. This component dynamically adapts to different model types and operations, providing a unified interface for data manipulation. It integrates with the repository pattern for data access, supports real-time data refresh, and provides user feedback through toast notifications and navigation management.
Key features include:
- Dynamic model resolution based on model name
- Support for all CRUD operations with operation-specific UI adaptation
- Automatic repository instantiation and management
- Integration with Angular routing for navigation flow
- Error handling with comprehensive logging
- Real-time data refresh and cache management
- Toast notifications for user feedback
- Responsive layout with Ionic components
Angular component page for CRUD operations on dynamic model entities.
Parameters:
| Name | Type | Description |
|---|---|---|
operation |
OperationKeys
|
The CRUD operation to perform (CREATE, READ, UPDATE, DELETE) |
modelName |
string
|
The name of the model class to operate on |
modelId |
string
|
The unique identifier of the model instance for read/update/delete operations |
Example
```typescript
// Usage in routing configuration
{
path: 'user/:modelId',
component: ModelPage,
data: {
modelName: 'User',
operation: OperationKeys.READ
}
}
// Direct component usage
<app-model
modelName="Product"
[operation]="OperationKeys.CREATE"
(submit)="handleSubmit($event)">
</app-model>
```Members
Array.<OperationKeys>
# static allowedOperations
Dynamically determined list of operations that are permitted based on the current context and model state. Initially contains CREATE and READ operations, with UPDATE and DELETE added when a modelId is present. This controls which action buttons are displayed and which operations are accessible to the user.
Array of operations allowed for the current model instance.
- Default Value:
- [OperationKeys.CREATE, OperationKeys.READ]
string
# static modelName
Identifies which registered model class this component should work with. This name is used to resolve the model constructor from the global model registry and instantiate the appropriate repository for data operations. The model must be properly registered using the @Model decorator for resolution to work.
The name of the model class to operate on.
OperationKeys.CREATE
|
OperationKeys.READ
|
OperationKeys.UPDATE
|
OperationKeys.DELETE
# 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