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