ngx-material-entity
Advanced tools
With NgxMaterialEntity you can define how to display entities directly on their properties by using a multitude of decorators for them. You can then use the input component to display the value solely based on the entity and the propertyKey.
With NgxMaterialEntity you can define how to display entities directly on their properties by using a multitude of decorators for them. You can then use the input component to display the value solely based on the entity and the propertyKey.
If the predefined decorators dont quite fit your needs you can also build your own.
The library also offers a table component which generates complete CRUD-functionality right out of the box.
NgxMaterialEntity aims to have a fast way to get started with a lot of default options which can be overriden to allow high customization aswell.
This package relies on the angular material library to render its components.
It also uses bootstrap for responsive design.
Create your entity and define Metadata directly on the properties:
:warning: IMPORTANT:
You need to always create an entity with the "new" keyword. Otherwise the metadata on the properties won't get generated.
import { Entity, EntityUtilities, string } from 'ngx-material-entity';
// The "extends Entity" can be left out.
// The abstract Entity-Class provides an id out of the box.
export class MyEntity extends Entity {
/**
* ↓ myString is a string
* ↓ which should be displayed inline
* ↓ and has the label 'My String'
*/
@string({
displayName: 'My String',
displayStyle: 'line'
})
myString: string;
constructor(entity?: MyEntity) {
super();
// this helper-method sets all values from the provided entity.
// It can be used universally.
EntityUtilities.new(this, entity);
}
}
For a list of all property decorators and their configuration options see PropertyDecorators.
You can import the NgxMatEntityInputModule anywhere in your code:
import { NgxMatEntityInputModule } from 'ngx-material-entity';
...
imports: [
NgxMatEntityInputModule
]
...
In the html you can then define:
<ngx-mat-entity-input [entity]="myEntity" [propertyKey]="myString">
</ngx-mat-entity-input>
That's it!
This snippet automatically generates an material input for "myString" based on the metadata you defined earlier.
For a list of further configuration options for the input see PropertyInput Configuration.
It is pretty easy to use the input component inside a for-loop that iterates over every key of an entity to build a complete form for that entity.
We thought this approach a bit further and build a complete CRUD table component with support for:
The component is usable out of the box but offers a lot of customization aswell.
In order to use the table component you have to define a service that handles http-Requests for the entity and extends from the abstract EntityService-Class:
// ↓ It's required that the service can be injected
@Injectable({
providedIn: 'root'
})
export class MyEntityService extends EntityService<MyEntity> {
baseUrl: string = `${environment.apiUrl}/my-entity`;
idKey: keyof MyEntity;
constructor(private readonly httpClient: HttpClient) {
super(httpClient);
}
// All the create, read, update and delete logic is already implemented, but you can of course override it.
}
Import the NgxMatEntityTableComponent anywhere in your code:
import { NgxMatEntityTableComponent } from 'ngx-material-entity';
...
imports: [
NgxMatEntityTableComponent
]
...
In your ts you can then define the table configuration data, eg.:
const tableData: TableData<MyEntity> = {
baseData: {
title: 'My Entities', // The title above the table
displayColumns: [
{
displayName: 'id',
value: (entity: MyEntity) => entity.id
},
{
displayName: 'My String',
value: (entity: MyEntity) => entity.myString
}
],
EntityClass: MyEntity,
EntityServiceClass: MyEntityService,
},
createDialogData: {
title: 'Create My Entity'
},
editDialogData: {
title: (entity: MyEntity) => `My Entity #${entity.id}`
}
};
In the html you can then define:
<ngx-mat-entity-table [tableData]="tableData">
</ngx-mat-entity-table>
For a list of all configuration options see NgxMatEntityTable Configuration.
The property decorators contain all the metadata of an entity property.
Contains information that is universally defined on every property.
export abstract class PropertyDecoratorConfig {
/**
* Whether or not the Property is displayed at all.
*
* @default true
*/
display?: boolean;
/**
* The name of the property used as a label for form fields.
*/
displayName!: string;
/**
* Whether or not the Property is required.
*
* @default true
*/
required?: boolean;
/**
* Whether or not the property gets omitted when creating new Entities.
*
* @default false
*/
omitForCreate?: boolean;
/**
* Whether or not the property gets omitted when updating Entities.
*
* @default false
*/
omitForUpdate?: boolean;
/**
* Defines the width of the input property when used inside the default create or edit dialog.
* Has 3 bootstrap values for different breakpoints for simple responsive design.
* The first value sets the columns for the screen size lg, the second for md and the third for sm.
*
* @default [6, 6, 12]
*/
defaultWidths?: [Col, Col, Col];
/**
* Specifies the how to position this property when using default create/edit dialogs.
*
* @default { row: -1, order: -1} (Adds the property at the end)
*/
position?: Position
}
For more information regarding the "defaultWidths" see the bootstrap guide about the Grid system.
The "default" display of a string value. Inside a single line mat-input.
export interface DefaultStringDecoratorConfig extends StringDecoratorConfig {
displayStyle: 'line',
/**
* The minimum required length of the string.
*/
minLength?: number,
/**
* The maximum required length of the string.
*/
maxLength?: number,
/**
* A regex used for validation.
*/
regex?: RegExp
}
Displays a string as a dropdown where the user can input one of the defined dropdownValues.
export interface DropdownStringDecoratorConfig extends StringDecoratorConfig {
displayStyle: 'dropdown',
/**
* The values of the dropdown, consisting of a name to display and the actual value
* Can also receive a function to determine the values.
*/
dropdownValues: DropdownValue<string>[]
}
Displays a string as a textbox.
export interface TextboxStringDecoratorConfig extends StringDecoratorConfig {
displayStyle: 'textbox',
/**
* The minimum required length of the string.
*/
minLength?: number,
/**
* The maximum required length of the string.
*/
maxLength?: number
}
Just like the default @string, but the user has additional autocomplete values to quickly input data.
export interface AutocompleteStringDecoratorConfig extends StringDecoratorConfig {
displayStyle: 'autocomplete',
/**
* The autocomplete values.
*/
autocompleteValues: string[],
/**
* The minimum required length of the string.
*/
minLength?: number,
/**
* The maximum required length of the string.
*/
maxLength?: number,
/**
* A regex used for validation.
*/
regex?: RegExp
}
The "default" display of a number value. Inside a single line mat-input.
export interface DefaultNumberDecoratorConfig extends NumberDecoratorConfig {
displayStyle: 'line',
/**
* The minimum value of the number.
*/
min?: number,
/**
* The maximum value of the number.
*/
max?: number
}
Displays the numbers in a dropdown
export interface DropdownNumberDecoratorConfig extends NumberDecoratorConfig {
displayStyle: 'dropdown',
/**
* The values of the dropdown, consisting of a name to display and the actual value.
*/
dropdownValues: DropdownValue<number>[]
}
Displays the boolean value as a MatSlideToggle
export interface ToggleBooleanDecoratorConfig extends BooleanDecoratorConfig {
displayStyle: 'toggle'
}
Displays the boolean value as a MatCheckbox
export interface CheckboxBooleanDecoratorConfig extends BooleanDecoratorConfig {
displayStyle: 'checkbox'
}
Displays the boolean value as a MatCheckbox
export interface DropdownBooleanDecoratorConfig extends BooleanDecoratorConfig {
displayStyle: 'dropdown',
/**
* The name of the true value if displayStyle dropdown is used.
*/
dropdownTrue: string,
/**
* The name of the false value if displayStyle dropdown is used.
*/
dropdownFalse: string
}
Displays a date value as an mat-datepicker.
export interface DefaultDateDecoratorConfig extends DateDecoratorConfig {
displayStyle: 'date',
/**
* A function to get the minimum value of the date.
*/
min?: (date?: Date) => Date,
/**
* A function to get the maximum value of the date.
*/
max?: (date?: Date) => Date,
/**
* A filter function to do more specific filtering. This could be the removal of e.g. All weekends.
*/
filter?: DateFilterFn<Date | null | undefined>
}
Displays the selection of a time period as the daterange-picker.
export interface DateRangeDateDecoratorConfig extends DateDecoratorConfig {
displayStyle: 'daterange',
/**
* A function to get the minimum value of the start date.
*/
minStart?: (date?: Date) => Date,
/**
* A function to get the maximum value of the start date.
*/
maxStart?: (date?: Date) => Date,
/**
* A function to get the minimum value of the end date.
*/
minEnd?: (date?: Date) => Date,
/**
* A function to get the maximum value of the end date.
*/
maxEnd?: (date?: Date) => Date,
/**
* A filter function to do more specific filtering on the disallowed end date values. This could be the removal of e.g. All weekends.
*/
filter?: DateFilterFn<Date>,
/**
* The placeholder for the start date of the date range picker.
*
* @default "Start"
*/
placeholderStart?: string,
/**
* The placeholder for the end date of the date range picker.
*
* @default "End"
*/
placeholderEnd?: string
}
Displays the date as a datetime input.
export interface DateTimeDateDecoratorConfig extends DateDecoratorConfig {
displayStyle: 'datetime',
/**
* The selectable times.
*/
times?: DropdownValue<Time>[],
/**
* The name to use as a label for the time form field.
*
* @default 'Time'
*/
timeDisplayName?: string,
/**
* A function to get the minimum value of the date.
*/
minDate?: (date?: Date) => Date,
/**
* A function to get the maximum value of the date.
*/
maxDate?: (date?: Date) => Date,
/**
* A filter function to do more specific date filtering. This could be the removal of e.g. All weekends.
*/
filterDate?: DateFilterFn<Date | null | undefined>,
/**
* A function to get the minimum value of the time.
*/
minTime?: (date?: Date) => Time,
/**
* A function to get the maximum value of the time.
*/
maxTime?: (date?: Date) => Time,
/**
* A filter function to do more specific time filtering. This could be e.g. The removal of lunch breaks.
*/
filterTime?: ((time: Time) => boolean) | (() => boolean)
}
Displays an entity object inline.
export interface DefaultObjectDecoratorConfig<EntityType extends object> extends ObjectDecoratorConfig<EntityType> {
/**
* The class of the object. Is used to call the constructor so that all metadata is initialized.
*/
EntityClass!: EntityClassNewable<EntityType>;
/**
* How to display the object.
*
* The objects properties are added as input fields in an section of the entity.
* Useful if the object only contains a few properties (e.g. A address on a user).
*/
displayStyle!: 'inline';
}
/**
* Interface definition for the @array metadata.
*/
abstract class ArrayDecoratorConfig extends PropertyDecoratorConfig {
/**
* How to display the string.
*/
displayStyle!: 'table' | 'chips';
/**
* The type of the items inside the array.
*/
itemType!: DecoratorTypes;
}
/**
* Definition for an array of Entities.
*/
export interface EntityArrayDecoratorConfig<EntityType extends object> extends ArrayDecoratorConfig {
itemType: DecoratorTypes.OBJECT,
displayStyle: 'table',
/**
* The EntityClass used for generating the create inputs.
*/
EntityClass: EntityClassNewable<EntityType>,
/**
* The definition of the columns to display. Consists of the displayName to show in the header of the row
* and the value, which is a function that generates the value to display inside a column.
*/
displayColumns: DisplayColumn<EntityType>[],
/**
* The data for the add-item-dialog.
* Can be omitted when adding items inline.
*/
createDialogData?: CreateData,
/**
* Whether or not the form for adding items to the array
* should be displayed inline.
*
* @default true
*/
createInline?: boolean,
/**
* The label for the add button when createInline is true.
*
* @default 'Add'
*/
addButtonLabel?: string,
/**
* The label for the remove button when createInline is true.
*
* @default 'Remove'
*/
removeButtonLabel?: string,
/**
* The error-message to display when the array is required but contains no values.
*/
missingErrorMessage?: string
}
/**
* Definition for an array of strings displayed as a chips list.
*/
export interface StringChipsArrayDecoratorConfig extends ArrayDecoratorConfig {
itemType: DecoratorTypes.STRING,
displayStyle: 'chips',
/**
* The class for the <i> tag used to remove an entry from the array.
*
* @default 'fas fa-circle-minus'
*/
deleteIcon?: string,
/**
* The minimum required length of the string.
*/
minLength?: number,
/**
* The maximum required length of the string.
*/
maxLength?: number,
/**
* A regex used for validation.
*/
regex?: RegExp
}
/**
* Definition for an array of autocomplete strings displayed as a chips list.
*/
export interface AutocompleteStringChipsArrayDecoratorConfig extends ArrayDecoratorConfig {
itemType: DecoratorTypes.STRING_AUTOCOMPLETE,
displayStyle: 'chips',
/**
* The class for the <i> tag used to remove an entry from the array.
*
* @default 'fas fa-circle-minus'
*/
deleteIcon?: string,
/**
* The autocomplete values.
*/
autocompleteValues: string[],
/**
* The minimum required length of the string.
*/
minLength?: number,
/**
* The maximum required length of the string.
*/
maxLength?: number,
/**
* A regex used for validation.
*/
regex?: RegExp
}
/**
* Definition for an array of Dates.
*/
export interface DateArrayDecoratorConfig extends ArrayDecoratorConfig {
itemType: DecoratorTypes.DATE,
/**
* The definition of the columns to display. Consists of the displayName to show in the header of the row
* and the value, which is a function that generates the value to display inside a column.
*/
displayColumns: DisplayColumn<Date>[],
/**
* The label for the add button.
*
* @default 'Add'
*/
addButtonLabel?: string,
/**
* The label for the remove button.
*
* @default 'Remove'
*/
removeButtonLabel?: string,
/**
* The error-message to display when the array is required but contains no values.
*/
missingErrorMessage?: string,
/**
* A function to get the minimum value of the date.
*/
min?: (date?: Date) => Date,
/**
* A function to get the maximum value of the date.
*/
max?: (date?: Date) => Date,
/**
* A filter function to do more specific filtering. This could be the removal of e.g. All weekends.
*/
filter?: DateFilterFn<Date | null | undefined>
}
/**
* Definition for an array of DateTimes.
*/
export interface DateTimeArrayDecoratorConfig extends ArrayDecoratorConfig {
itemType: DecoratorTypes.DATE_TIME,
/**
* The definition of the columns to display. Consists of the displayName to show in the header of the row
* and the value, which is a function that generates the value to display inside a column.
*/
displayColumns: DisplayColumn<Date>[],
/**
* The label for the add button.
*
* @default 'Add'
*/
addButtonLabel?: string,
/**
* The label for the remove button.
*
* @default 'Remove'
*/
removeButtonLabel?: string,
/**
* The error-message to display when the array is required but contains no values.
*/
missingErrorMessage?: string,
/**
* The selectable times.
*/
times?: DropdownValue<Time>[],
/**
* The name to use as a label for the time form field.
*
* @default 'Time'
*/
timeDisplayName?: string,
/**
* A function to get the minimum value of the date.
*/
minDate?: (date?: Date) => Date,
/**
* A function to get the maximum value of the date.
*/
maxDate?: (date?: Date) => Date,
/**
* A filter function to do more specific date filtering. This could be the removal of e.g. All weekends.
*/
filterDate?: DateFilterFn<Date | null | undefined>,
/**
* A function to get the minimum value of the time.
*/
minTime?: (date?: Date) => Time,
/**
* A function to get the maximum value of the time.
*/
maxTime?: (date?: Date) => Time,
/**
* A filter function to do more specific time filtering. This could be e.g. The removal of lunch breaks.
*/
filterTime?: ((time: Time) => boolean) | (() => boolean)
}
/**
* Definition for an array of DateRanges.
*/
export interface DateRangeArrayDecoratorConfig extends ArrayDecoratorConfig {
itemType: DecoratorTypes.DATE_RANGE,
/**
* The definition of the columns to display. Consists of the displayName to show in the header of the row
* and the value, which is a function that generates the value to display inside a column.
*/
displayColumns: DisplayColumn<DateRange>[],
/**
* The label for the add button.
*
* @default 'Add'
*/
addButtonLabel?: string,
/**
* The label for the remove button.
*
* @default 'Remove'
*/
removeButtonLabel?: string,
/**
* The error-message to display when the array is required but contains no values.
*/
missingErrorMessage?: string,
/**
* A function to get the minimum value of the start date.
*/
minStart?: (date?: Date) => Date,
/**
* A function to get the maximum value of the start date.
*/
maxStart?: (date?: Date) => Date,
/**
* A function to get the minimum value of the end date.
*/
minEnd?: (date?: Date) => Date,
/**
* A function to get the maximum value of the end date.
*/
maxEnd?: (date?: Date) => Date,
/**
* A filter function to do more specific filtering on the disallowed end date values. This could be the removal of e.g. All weekends.
*/
filter?: DateFilterFn<Date>,
/**
* The placeholder for the start date of the date range picker.
*
* @default "Start"
*/
placeholderStart?: string,
/**
* The placeholder for the end date of the date range picker.
*
* @default "End"
*/
placeholderEnd?: string
}
/**
* The type of any property annotated with @file.
*/
export type FileData = FileDataWithFile | FileDataWithUrl;
abstract class FileDecoratorConfig extends PropertyDecoratorConfig {
/**
* Specifies whether or not the decorated property can have multiple files.
*/
multiple!: boolean;
/**
* The type of the upload.
*/
type!: 'image' | 'other';
/**
* The class for the <i> tag used to remove a file from the input.
*
* @default 'fas fa-circle-minus'
*/
deleteIcon?: string;
/**
* Whether or not the file should be displayed inside a preview.
*
* @default true
*/
preview?: boolean;
/**
* Specifies allowed File types like 'image/jpg' etc.
* Allows every file type if not set.
*/
allowedMimeTypes?: string[];
/**
* The error dialog to display when the user inputs files that are not of the allowed mime types.
*/
mimeTypeErrorDialog?: ConfirmDialogData;
/**
* The maximum allowed size of a single file in MB.
*
* @default 10
*/
maxSize?: number;
/**
* The error dialog to display when the user inputs a single file that is bigger than the 'maxSize' value.
*/
maxSizeErrorDialog?: ConfirmDialogData;
/**
* The maximum allowed size of all files in MB.
*
* @default 100
*/
maxSizeTotal?: number;
/**
* The error dialog to display when the user inputs files which are in total bigger than the 'maxSizeTotal' value.
*/
maxSizeTotalErrorDialog?: ConfirmDialogData;
/**
* Defines whether or not a dropdown box is displayed.
*
* @default true // when multiple is set to true.
* false // when multiple is set to false.
*/
dragAndDrop?: boolean;
}
/**
* Definition for a default file.
*/
export interface DefaultFileDecoratorConfig extends FileDecoratorConfig {
type: 'other',
preview?: false
}
/**
* Definition for a image file.
*/
export interface ImageFileDecoratorConfig extends FileDecoratorConfig {
// eslint-disable-next-line jsdoc/require-jsdoc
type: 'image',
/**
* Specifies allowed File types like image/jpg etc. In a comma separated string.
*
* @default ['image/*']
*/
allowedMimeTypes?: string[],
/**
* Url to the file that gets displayed in the preview when no file has been selected yet.
*/
previewPlaceholderUrl?: string
}
Wit the custom decorator you have the freedom to build your own input components.
The @custom decorator gives you the option to provide additional metadata. It also uses generics to provide type safety for you:
// Somewhere outside the entity
// This is the additional metadata to provide for the property.
interface MyCustomMetadata {
random: () => string
}
.
.
.
// Somewhere inside the entity
@custom<string, MyCustomMetadata, MyEntity>({
customMetadata: {
// This is type safe because we defined two lines above that the custom metadata has the type "MyCustomMetadata"
random: () => (Math.random() + 1).toString(36).substring(7)
},
displayName: 'Random Value',
component: CustomInputComponent // will be defined below
})
randomValue!: string;
The component needs to extend the NgxMatEntityBaseInputComponent:
@Component({
selector: 'custom-input-component',
templateUrl: './custom-input.component.html',
styleUrls: ['./custom-input.component.scss']
})
export class CustomInputComponent
extends NgxMatEntityBaseInputComponent<MyEntity, DecoratorTypes.CUSTOM, string, MyCustomMetadata>
implements OnInit {
// Define your logic here.
// The base class already provides the entity and key values and handles getting the metadata.
// This is also type safe because we defined above that the custom metadata has the type "MyCustomMetadata"
// and the entity has the type "MyEntity"
}
With the property input you can generate an input field based on the metadata you defined on your property.
Configuration options are:
/**
* The entity on which the property exists. Used in conjunction with the "propertyKey"
* to determine the property for which the input should be generated.
*/
@Input()
entity!: EntityType;
/**
* The name of the property to generate the input for. Used in conjunction with the "entity".
*/
@Input()
propertyKey!: keyof EntityType;
/**
* (optional) A custom function to generate the error-message for invalid inputs.
*/
@Input()
getValidationErrorMessage!: (model: NgModel) => string;
/**
* Whether to hide a value if it is omitted for creation.
* Is used internally for the object property.
*/
@Input()
hideOmitForCreate?: boolean;
/**
* Whether to hide a value if it is omitted for editing.
* Is used internally for the object property.
*/
@Input()
hideOmitForEdit?: boolean;
With the ngx-mat-entity-table component you can create a complete CRUD functionality for your entities.
As this component is highly configurable and allows you to either create your own create and edit implementations or use the default out of the box dialogs for that.
/**
* The base data of the ngx-mat-entity-table.
*/
export interface BaseData<EntityType extends object> {
/**
* The title of the table.
*/
title: string,
/**
* The definition of the columns to display. Consists of the displayName to show in the header of the row
* and the value, which is a function that generates the value to display inside a column.
*/
displayColumns: DisplayColumn<EntityType>[],
/**
* The Class of the service that handles the entities.
* Needs to be injectable and an extension of the "EntityService"-Class.
*/
EntityServiceClass: EntityServiceClassNewable<EntityType>,
/**
* The Class of the entities to manage.
*/
EntityClass?: EntityClassNewable<EntityType>,
/**
* The label on the search bar. Defaults to "Search".
*/
searchLabel?: string,
/**
* The label on the button for adding new entities. Defaults to "Create".
*/
createButtonLabel?: string,
/**
* Takes a custom edit method which runs when you click on a entity.
* If you don't need any special editing of entries you can also omit this.
* In that case a default edit dialog is generated.
*/
edit?: (entity: EntityType) => unknown,
/**
* Takes a method to run when you click on the new button.
* If you don't need anything special you can also omit this.
* In that case a default create dialog is generated.
*/
create?: (entity: EntityType) => unknown,
/**
* Defines how the search string of entities is generated.
*/
searchString?: (entity: EntityType) => string,
/**
* Defines whether or not the user can add new entities.
*
* @default () => true
*/
allowCreate?: () => boolean,
/**
* Defines whether or not the user can view this specific entity.
*
* @default () => true
*/
allowRead?: (entity: EntityType) => boolean,
/**
* Defines whether or not the user can edit this specific entity.
*
* @default () => true
*/
allowUpdate?: (entity: EntityType) => boolean,
/**
* Whether or not the user can delete this specific entity.
*/
allowDelete?: (entity: EntityType) => boolean,
/**
* All Actions that you want to run on multiple entities can be defined here.
* (e.g. Download as zip-file or mass delete).
*/
multiSelectActions?: MultiSelectAction<EntityType>[],
/**
* The Label for the button that opens all multi-actions.
*/
multiSelectLabel?: string
}
/**
* The data of the default create-dialog.
*/
export interface CreateData {
/**
* The title of the default create-dialog.
*/
title?: string,
/**
* The label on the create-button of the default create-dialog. Defaults to "Create".
*/
createButtonLabel?: string,
/**
* The label on the cancel-button for the default create-dialog. Defaults to "Cancel".
*/
cancelButtonLabel?: string,
/**
* Whether or not the creation of an entry should require a confirm dialog.
*/
createRequiresConfirmDialog?: boolean,
/**
* The data used to generate a confirmation dialog for the create action.
*/
confirmCreateDialogData?: ConfirmDialogData
}
/**
* The data of the default edit-dialog.
*/
export interface EditDialogData<EntityType extends object> {
/**
* The title of the default edit-dialog.
*/
title?: (entity: EntityType) => string,
/**
* The label on the confirm-button of the default edit-dialog. Defaults to "Save".
*/
confirmButtonLabel?: string,
/**
* The label on the delete-button of the default edit-dialog. Defaults to "Delete".
*/
deleteButtonLabel?: string,
/**
* The label on the cancel-button for the default edit-dialog. Defaults to "Cancel".
*/
cancelButtonLabel?: string,
/**
* Whether or not the deletion of an entry should require a confirm dialog.
*/
deleteRequiresConfirmDialog?: boolean,
/**
* Whether or not the editing of an entry should require a confirm dialog.
*/
editRequiresConfirmDialog?: boolean,
/**
* The data used to generate a confirmation dialog for the delete action.
*/
confirmDeleteDialogData?: ConfirmDialogData,
/**
* The data used to generate a confirmation dialog for the delete action.
*/
confirmEditDialogData?: ConfirmDialogData
}
/**
* All the configuration data required to display a ngx-mat-entity-table.
*/
export interface TableData<EntityType extends object> {
/**
* The base data for the table-component.
* Includes stuff like the title for the table, what to display inside the rows etc.
*/
baseData: BaseData<EntityType>,
/**
* The data for the default create-dialog.
* Can be omitted when specifying a custom "create" method inside the baseData.
*/
createDialogData?: CreateData,
/**
* The data for the default edit-dialog.
* Can be omitted when specifying a custom "edit" method inside the baseData.
*/
editDialogData?: EditDialogData<EntityType>
}
The definition of a column inside the table.
export interface DisplayColumn<EntityType extends object> {
/**
* The name inside the header.
*/
displayName: string,
/**
* A method to get the value inside an row.
*/
value: (entity: EntityType) => string
}
Multiselect Actions appear on the right upper corner and allow you to do actions on all selected entries.
export interface MultiSelectAction<EntityType extends object> {
/**
* The name of the action.
*/
displayName: string,
/**
* The action itself.
*/
action: (selectedEntities: EntityType[]) => Promise<unknown>,
/**
* A method that defines whether or not the action can be used.
*
* @default true
*/
enabled?: (selectedEntities: EntityType[]) => boolean,
/**
* A method that defines whether or not a confirm dialog is needed to run the action.
*
* @default false
*/
requireConfirmDialog?: (selectedEntities: EntityType[]) => boolean,
/**
* The data used to generate a confirmation dialog for the multiSelect action.
*/
confirmDialogData?: ConfirmDialogData
}
When handling entities that have a lot of properties, you might don't want to edit everything inside a dialog but in a separate page.
For that case, this library has a generic edit page. It works flawlessly with the table component, but you need to adjust some things. The same procedure can also be used to define a create page.
defaultEdit: 'page'import { defaultEditDataRoute, EditDataRoute, NGX_EDIT_DATA_ENTITY, NGX_EDIT_DATA_ENTITY_SERVICE, PageEditData } from 'ngx-material-entity';
//...
const editMyEntityData: PageEditData<MyEntity> = {
editData: {
title: (entity: MyEntity) => `My Entity #${entity.id}`
}
};
const editDataRoute: EditDataRoute = {
...defaultEditDataRoute,
providers: [
{
provide: NGX_EDIT_DATA_ENTITY_SERVICE,
useExisting: MyEntityService
},
{
provide: NGX_EDIT_DATA_ENTITY,
useValue: MyEntity
},
{
provide: NGX_EDIT_DATA,
useValue: editMyEntityData
}
]
};
The defaultEditDataRoute just provides values for things like path, title or loadComponent out of the box.
The providers array is needed for the route to access the relevant entity service, entity class and the configuration data.
By default, the configuration above will open any entities on the path entities/:id.
At some point you probably want to open them on different paths, eg. my-entities/:id for the example above.
In order to do that you need to add the custom path at two different places:
override readonly editBaseRoute: string = 'my-entities';
import { defaultEditDataRoute, EditDataRoute, NGX_EDIT_DATA_ENTITY, NGX_EDIT_DATA_ENTITY_SERVICE, PageEditData } from 'ngx-material-entity';
//...
const editDataRoute: EditDataRoute = {
...defaultEditDataRoute,
path: 'my-entities/:id',
providers: [
{
provide: NGX_EDIT_DATA_ENTITY_SERVICE,
useExisting: MyEntityService
},
{
provide: NGX_EDIT_DATA_ENTITY,
useValue: MyEntity
}
]
};
If you want the user to confim abandoning their changes you can simply add the UnsavedChangesGuard to your route:
import { defaultEditDataRoute, EditDataRoute, NGX_EDIT_DATA_ENTITY, NGX_EDIT_DATA_ENTITY_SERVICE, PageEditData, UnsavedChangesGuard } from 'ngx-material-entity';
//...
const editDataRoute: EditDataRoute = {
...defaultEditDataRoute,
path: 'my-entities/:id',
providers: [
{
provide: NGX_EDIT_DATA_ENTITY_SERVICE,
useExisting: MyEntityService
},
{
provide: NGX_EDIT_DATA_ENTITY,
useValue: MyEntity
}
],
canDeactivate: [UnsavedChangesGuard]
};
FAQs
With NgxMaterialEntity you can define how to display entities directly on their properties by using a multitude of decorators for them. You can then use the input component to display the value solely based on the entity and the propertyKey.
We found that ngx-material-entity demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Research
Security News
Socket’s threat research team has detected six malicious npm packages typosquatting popular libraries to insert SSH backdoors.
Security News
MITRE's 2024 CWE Top 25 highlights critical software vulnerabilities like XSS, SQL Injection, and CSRF, reflecting shifts due to a refined ranking methodology.
Security News
In this segment of the Risky Business podcast, Feross Aboukhadijeh and Patrick Gray discuss the challenges of tracking malware discovered in open source softare.