{"id":23854759,"url":"https://github.com/Service-Soft/ngx-material-entity","last_synced_at":"2025-09-08T01:32:23.044Z","repository":{"id":46044611,"uuid":"505094708","full_name":"Service-Soft/ngx-material-entity","owner":"Service-Soft","description":"With NgxMaterialEntity you can create entities and define how to display them directly on their properties. It can even generate complete and highly customizable CRUD-Tables for them.","archived":false,"fork":false,"pushed_at":"2024-12-30T19:23:57.000Z","size":9880,"stargazers_count":2,"open_issues_count":26,"forks_count":0,"subscribers_count":1,"default_branch":"dev","last_synced_at":"2024-12-30T20:22:23.244Z","etag":null,"topics":["angular","angular-material","crud-generator"],"latest_commit_sha":null,"homepage":"","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/Service-Soft.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":"CONTRIBUTING.md","funding":null,"license":"LICENSE.md","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2022-06-19T11:50:21.000Z","updated_at":"2024-12-30T19:20:06.000Z","dependencies_parsed_at":"2023-09-24T21:32:26.662Z","dependency_job_id":"fc8e5502-c3e1-41f1-9c5d-5a9b9868d668","html_url":"https://github.com/Service-Soft/ngx-material-entity","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Service-Soft%2Fngx-material-entity","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Service-Soft%2Fngx-material-entity/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Service-Soft%2Fngx-material-entity/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Service-Soft%2Fngx-material-entity/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Service-Soft","download_url":"https://codeload.github.com/Service-Soft/ngx-material-entity/tar.gz/refs/heads/dev","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":232271882,"owners_count":18497768,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["angular","angular-material","crud-generator"],"created_at":"2025-01-03T00:01:36.999Z","updated_at":"2025-01-03T00:03:18.074Z","avatar_url":"https://github.com/Service-Soft.png","language":"TypeScript","readme":"# NgxMaterialEntity\nWith 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.\n\nIf the predefined decorators dont quite fit your needs you can also build your own.\n\nThe library also offers a table component which generates complete CRUD-functionality right out of the box.\n\nNgxMaterialEntity aims to have a fast way to get started with a lot of default options which can be overriden to allow high customization aswell.\n\n![](https://raw.githubusercontent.com/tim-fabian/ngx-material-entity/release/ngx-mat-entity.gif)\n\n[![CI/CD](https://github.com/tim-fabian/ngx-material-entity/actions/workflows/main.yml/badge.svg?branch=release)](https://github.com/tim-fabian/ngx-material-entity/actions/workflows/main.yml)\n[![npm version](https://badge.fury.io/js/ngx-material-entity.svg)](https://badge.fury.io/js/ngx-material-entity)\n[![Known Vulnerabilities](https://snyk.io/test/npm/ngx-material-entity/badge.svg)](https://snyk.io/test/npm/ngx-material-entity)\n[![codecov](https://codecov.io/gh/tim-fabian/ngx-material-entity/branch/dev/graph/badge.svg?token=8Y45KLA74K)](https://codecov.io/gh/tim-fabian/ngx-material-entity)\n\n# Table of Contents\n- [NgxMaterialEntity](#ngxmaterialentity)\n- [Table of Contents](#table-of-contents)\n- [Requirements](#requirements)\n- [Basic Usage](#basic-usage)\n  - [Create your entity](#create-your-entity)\n  - [Use the input for your entity property](#use-the-input-for-your-entity-property)\n  - [Generate a complete CRUD Table for your entity](#generate-a-complete-crud-table-for-your-entity)\n    - [Create a Service for your entity](#create-a-service-for-your-entity)\n    - [Define the Table-Element](#define-the-table-element)\n- [PropertyDecorators](#propertydecorators)\n  - [base](#base)\n  - [@string default](#string-default)\n  - [@string dropdown](#string-dropdown)\n  - [@string textbox](#string-textbox)\n  - [@string autocomplete](#string-autocomplete)\n  - [@number default](#number-default)\n  - [@number dropdown](#number-dropdown)\n  - [@boolean toggle](#boolean-toggle)\n  - [@boolean checkbox](#boolean-checkbox)\n  - [@boolean dropdown](#boolean-dropdown)\n  - [@date default](#date-default)\n  - [@date dateRange](#date-daterange)\n  - [@date datetime](#date-datetime)\n  - [@object default](#object-default)\n  - [@array](#array)\n  - [@array entity](#array-entity)\n  - [@array string chips](#array-string-chips)\n  - [@array string chips autocomplete](#array-string-chips-autocomplete)\n  - [@array date](#array-date)\n  - [@array date time](#array-date-time)\n  - [@array date range](#array-date-range)\n  - [@file data](#file-data)\n  - [@file](#file)\n  - [@file default](#file-default)\n  - [@file image](#file-image)\n  - [@custom](#custom)\n    - [metadata](#metadata)\n    - [component](#component)\n- [NgxMatEntityInput Configuration](#ngxmatentityinput-configuration)\n- [NgxMatEntityTable Configuration](#ngxmatentitytable-configuration)\n  - [Display Columns](#display-columns)\n  - [Multiselect Actions](#multiselect-actions)\n  - [Edit/Create in seperate page](#editcreate-in-seperate-page)\n    - [1. In the base data entry of your table config add `defaultEdit: 'page'`](#1-in-the-base-data-entry-of-your-table-config-add-defaultedit-page)\n    - [2. Add the route on which the entity should be edited:](#2-add-the-route-on-which-the-entity-should-be-edited)\n    - [3. Use a custom route (optional)](#3-use-a-custom-route-optional)\n    - [4. Require confirmation before leaving page with unsaved changes (optional)](#4-require-confirmation-before-leaving-page-with-unsaved-changes-optional)\n\n# Requirements\nThis package relies on the [angular material library](https://material.angular.io/guide/getting-started) to render its components.\n\n# Basic Usage\n## Create your entity\nCreate your entity and define Metadata directly on the properties:\n\u003e :warning: IMPORTANT:\n\u003e \u003cbr\u003e\n\u003e You need to always create an entity with the \"new\" keyword.\n\u003e Otherwise the metadata on the properties won't get generated.\n\n```typescript\nimport { Entity, EntityUtilities, string } from 'ngx-material-entity';\n\n// The \"extends Entity\" can be left out.\n// The abstract Entity-Class provides an id out of the box.\nexport class MyEntity extends Entity {\n\n    /**\n     * ↓ myString is a string\n     * ↓ which should be displayed inline\n     * ↓ and has the label 'My String'\n    */ \n    @string({\n        displayName: 'My String',\n        displayStyle: 'line'\n    })\n    myString: string;\n\n    constructor(entity?: MyEntity) {\n        super();\n        // this helper-method sets all values from the provided entity.\n        // It can be used universally.\n        EntityUtilities.new(this, entity);\n    }\n\n}\n```\nFor a list of all property decorators and their configuration options see [PropertyDecorators](#propertydecorators).\n\n## Use the input for your entity property\nYou can import the ```NgxMatEntityInputModule``` anywhere in your code:\n\n```typescript\nimport { NgxMatEntityInputModule } from 'ngx-material-entity';\n\n...\n    imports: [\n        NgxMatEntityInputModule\n    ]\n...\n```\n\nIn the html you can then define:\n\n```html\n\u003cngx-mat-entity-input [entity]=\"myEntity\" [propertyKey]=\"myString\"\u003e\n\u003c/ngx-mat-entity-input\u003e\n```\n\nThat's it!\n\nThis snippet automatically generates an material input for \"myString\" based on the metadata you defined earlier.\n\u003cbr\u003e\nFor a list of further configuration options for the input see [PropertyInput Configuration](#propertyinput-configuration).\n\n## Generate a complete CRUD Table for your entity\nIt 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.\n\u003cbr\u003e\nWe thought this approach a bit further and build a complete CRUD table component with support for:\n- omitting values for creating or updating entities\n- layouting \u0026 responsive design\n- multi select actions\n- validation\n\nThe component is usable out of the box but offers a lot of customization aswell.\n\n### Create a Service for your entity\nIn 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:\n\n```typescript\n// ↓ It's required that the service can be injected\n@Injectable({\n    providedIn: 'root'\n})\nexport class MyEntityService extends EntityService\u003cMyEntity\u003e {\n    baseUrl: string = `${environment.apiUrl}/my-entity`;\n    idKey: keyof MyEntity;\n\n    constructor(private readonly httpClient: HttpClient) {\n        super(httpClient);\n    }\n\n    // All the create, read, update and delete logic is already implemented, but you can of course override it.\n}\n```\n\n### Define the Table-Element\nImport the `NgxMatEntityTableComponent` anywhere in your code:\n\n```typescript\nimport { NgxMatEntityTableComponent } from 'ngx-material-entity';\n\n...\n    imports: [\n        NgxMatEntityTableComponent\n    ]\n...\n```\n\nIn your ts you can then define the table configuration data, eg.:\n\n```typescript\nconst tableData: TableData\u003cMyEntity\u003e = {\n    baseData: {\n        title: 'My Entities', // The title above the table\n        displayColumns: [\n            {\n                displayName: 'id',\n                value: (entity: MyEntity) =\u003e entity.id\n            },\n            {\n                displayName: 'My String',\n                value: (entity: MyEntity) =\u003e entity.myString\n            }\n        ],\n        EntityClass: MyEntity,\n        EntityServiceClass: MyEntityService,\n    },\n    createDialogData: {\n        title: 'Create My Entity'\n    },\n    editDialogData: {\n        title: (entity: MyEntity) =\u003e `My Entity #${entity.id}`\n    }\n};\n```\n\nIn the html you can then define:\n\n```html\n\u003cngx-mat-entity-table [tableData]=\"tableData\"\u003e\n\u003c/ngx-mat-entity-table\u003e\n```\n\nFor a list of all configuration options see [NgxMatEntityTable Configuration](#ngxmatentitytable-configuration).\n\n# PropertyDecorators\nThe property decorators contain all the metadata of an entity property.\n\n## base\nContains information that is universally defined on every property.\n\n```typescript\nexport abstract class PropertyDecoratorConfig {\n    /**\n     * Whether or not the Property is displayed at all.\n     *\n     * @default true\n     */\n    display?: boolean;\n    /**\n     * The name of the property used as a label for form fields.\n     */\n    displayName!: string;\n    /**\n     * Whether or not the Property is required.\n     *\n     * @default true\n     */\n    required?: boolean;\n    /**\n     * Whether or not the property gets omitted when creating new Entities.\n     *\n     * @default false\n     */\n    omitForCreate?: boolean;\n    /**\n     * Whether or not the property gets omitted when updating Entities.\n     *\n     * @default false\n     */\n    omitForUpdate?: boolean;\n    /**\n     * Defines the width of the input property when used inside the default create or edit dialog.\n     * Has 3 values for different breakpoints for simple responsive design based on bootstrap (1-12).\n     * The first value sets the columns for the screen size lg, the second for md and the third for sm.\n     *\n     * @default [6, 6, 12]\n     */\n    defaultWidths?: [Col, Col, Col];\n    /**\n     * Specifies the how to position this property when using default create/edit dialogs.\n     *\n     * @default { row: -1,  order: -1} (Adds the property at the end)\n     */\n    position?: Position\n}\n```\n\n## @string default\nThe \"default\" display of a string value. Inside a single line mat-input.\n\n```typescript\nexport interface DefaultStringDecoratorConfig extends StringDecoratorConfig {\n    displayStyle: 'line',\n    /**\n     * The minimum required length of the string.\n     */\n    minLength?: number,\n    /**\n     * The maximum required length of the string.\n     */\n    maxLength?: number,\n    /**\n     * A regex used for validation.\n     */\n    regex?: RegExp\n}\n```\n\n## @string dropdown\nDisplays a string as a dropdown where the user can input one of the defined dropdownValues.\n\n```typescript\nexport interface DropdownStringDecoratorConfig extends StringDecoratorConfig {\n    displayStyle: 'dropdown',\n    /**\n     * The values of the dropdown, consisting of a name to display and the actual value\n     * Can also receive a function to determine the values.\n     */\n    dropdownValues: DropdownValue\u003cstring\u003e[]\n}\n```\n\n## @string textbox\nDisplays a string as a textbox.\n\n```typescript\nexport interface TextboxStringDecoratorConfig extends StringDecoratorConfig {\n    displayStyle: 'textbox',\n    /**\n     * The minimum required length of the string.\n     */\n    minLength?: number,\n    /**\n     * The maximum required length of the string.\n     */\n    maxLength?: number\n}\n```\n\n## @string autocomplete\nJust like the default @string, but the user has additional autocomplete values to quickly input data.\n\n```typescript\nexport interface AutocompleteStringDecoratorConfig extends StringDecoratorConfig {\n    displayStyle: 'autocomplete',\n    /**\n     * The autocomplete values.\n     */\n    autocompleteValues: string[],\n    /**\n     * The minimum required length of the string.\n     */\n    minLength?: number,\n    /**\n     * The maximum required length of the string.\n     */\n    maxLength?: number,\n    /**\n     * A regex used for validation.\n     */\n    regex?: RegExp\n}\n```\n\n## @number default\nThe \"default\" display of a number value. Inside a single line mat-input.\n\n```typescript\nexport interface DefaultNumberDecoratorConfig extends NumberDecoratorConfig {\n    displayStyle: 'line',\n    /**\n     * The minimum value of the number.\n     */\n    min?: number,\n    /**\n     * The maximum value of the number.\n     */\n    max?: number\n}\n```\n\n## @number dropdown\nDisplays the numbers in a dropdown\n\n```typescript\nexport interface DropdownNumberDecoratorConfig extends NumberDecoratorConfig {\n    displayStyle: 'dropdown',\n    /**\n     * The values of the dropdown, consisting of a name to display and the actual value.\n     */\n    dropdownValues: DropdownValue\u003cnumber\u003e[]\n}\n```\n\n## @boolean toggle\nDisplays the boolean value as a MatSlideToggle\n\n```typescript\nexport interface ToggleBooleanDecoratorConfig extends BooleanDecoratorConfig {\n    displayStyle: 'toggle'\n}\n```\n\n## @boolean checkbox\nDisplays the boolean value as a MatCheckbox\n\n```typescript\nexport interface CheckboxBooleanDecoratorConfig extends BooleanDecoratorConfig {\n    displayStyle: 'checkbox'\n}\n```\n\n## @boolean dropdown\nDisplays the boolean value as a MatCheckbox\n\n```typescript\nexport interface DropdownBooleanDecoratorConfig extends BooleanDecoratorConfig {\n    displayStyle: 'dropdown',\n    /**\n     * The name of the true value if displayStyle dropdown is used.\n     */\n    dropdownTrue: string,\n    /**\n     * The name of the false value if displayStyle dropdown is used.\n     */\n    dropdownFalse: string\n}\n```\n\n## @date default\nDisplays a date value as an mat-datepicker.\n```typescript\nexport interface DefaultDateDecoratorConfig extends DateDecoratorConfig {\n    displayStyle: 'date',\n    /**\n     * A function to get the minimum value of the date.\n     */\n    min?: (date?: Date) =\u003e Date,\n    /**\n     * A function to get the maximum value of the date.\n     */\n    max?: (date?: Date) =\u003e Date,\n    /**\n     * A filter function to do more specific filtering. This could be the removal of e.g. All weekends.\n     */\n    filter?: DateFilterFn\u003cDate | null | undefined\u003e\n}\n```\n\n## @date dateRange\nDisplays the selection of a time period as the daterange-picker.\n\n```typescript\nexport interface DateRangeDateDecoratorConfig extends DateDecoratorConfig {\n    displayStyle: 'daterange',\n    /**\n     * A function to get the minimum value of the start date.\n     */\n    minStart?: (date?: Date) =\u003e Date,\n    /**\n     * A function to get the maximum value of the start date.\n     */\n    maxStart?: (date?: Date) =\u003e Date,\n    /**\n     * A function to get the minimum value of the end date.\n     */\n    minEnd?: (date?: Date) =\u003e Date,\n    /**\n     * A function to get the maximum value of the end date.\n     */\n    maxEnd?: (date?: Date) =\u003e Date,\n    /**\n     * A filter function to do more specific filtering on the disallowed end date values. This could be the removal of e.g. All weekends.\n     */\n    filter?: DateFilterFn\u003cDate\u003e,\n    /**\n     * The placeholder for the start date of the date range picker.\n     *\n     * @default \"Start\"\n     */\n    placeholderStart?: string,\n    /**\n     * The placeholder for the end date of the date range picker.\n     *\n     * @default \"End\"\n     */\n    placeholderEnd?: string\n}\n```\n\n## @date datetime\nDisplays the date as a datetime input.\n\n```typescript\nexport interface DateTimeDateDecoratorConfig extends DateDecoratorConfig {\n    displayStyle: 'datetime',\n    /**\n     * The selectable times.\n     */\n    times?: DropdownValue\u003cTime\u003e[],\n    /**\n     * The name to use as a label for the time form field.\n     *\n     * @default 'Time'\n     */\n    timeDisplayName?: string,\n    /**\n     * A function to get the minimum value of the date.\n     */\n    minDate?: (date?: Date) =\u003e Date,\n    /**\n     * A function to get the maximum value of the date.\n     */\n    maxDate?: (date?: Date) =\u003e Date,\n    /**\n     * A filter function to do more specific date filtering. This could be the removal of e.g. All weekends.\n     */\n    filterDate?: DateFilterFn\u003cDate | null | undefined\u003e,\n    /**\n     * A function to get the minimum value of the time.\n     */\n    minTime?: (date?: Date) =\u003e Time,\n    /**\n     * A function to get the maximum value of the time.\n     */\n    maxTime?: (date?: Date) =\u003e Time,\n    /**\n     * A filter function to do more specific time filtering. This could be e.g. The removal of lunch breaks.\n     */\n    filterTime?: ((time: Time) =\u003e boolean) | (() =\u003e boolean)\n}\n```\n\n## @object default\nDisplays an entity object inline.\n\n```typescript\nexport interface DefaultObjectDecoratorConfig\u003cEntityType extends object\u003e extends ObjectDecoratorConfig\u003cEntityType\u003e {\n    /**\n     * The class of the object. Is used to call the constructor so that all metadata is initialized.\n     */\n    EntityClass!: EntityClassNewable\u003cEntityType\u003e;\n\n    /**\n     * How to display the object.\n     *\n     * The objects properties are added as input fields in an section of the entity.\n     * Useful if the object only contains a few properties (e.g. A address on a user).\n     */\n    displayStyle!: 'inline';\n}\n```\n\n## @array\n```typescript\n/**\n * Interface definition for the @array metadata.\n */\nabstract class ArrayDecoratorConfig extends PropertyDecoratorConfig {\n    /**\n     * How to display the string.\n     */\n    displayStyle!: 'table' | 'chips';\n\n    /**\n     * The type of the items inside the array.\n     */\n    itemType!: DecoratorTypes;\n}\n```\n## @array entity\n```typescript\n/**\n * Definition for an array of Entities.\n */\nexport interface EntityArrayDecoratorConfig\u003cEntityType extends object\u003e extends ArrayDecoratorConfig {\n    itemType: DecoratorTypes.OBJECT,\n    displayStyle: 'table',\n\n    /**\n     * The EntityClass used for generating the create inputs.\n     */\n    EntityClass: EntityClassNewable\u003cEntityType\u003e,\n\n    /**\n     * The definition of the columns to display. Consists of the displayName to show in the header of the row\n     * and the value, which is a function that generates the value to display inside a column.\n     */\n    displayColumns: DisplayColumn\u003cEntityType\u003e[],\n\n    /**\n     * The data for the add-item-dialog.\n     * Can be omitted when adding items inline.\n     */\n    createDialogData?: CreateData,\n\n    /**\n     * Whether or not the form for adding items to the array\n     * should be displayed inline.\n     *\n     * @default true\n     */\n    createInline?: boolean,\n\n    /**\n     * The label for the add button when createInline is true.\n     *\n     * @default 'Add'\n     */\n    addButtonLabel?: string,\n\n    /**\n     * The label for the remove button when createInline is true.\n     *\n     * @default 'Remove'\n     */\n    removeButtonLabel?: string,\n\n    /**\n     * The error-message to display when the array is required but contains no values.\n     */\n    missingErrorMessage?: string\n}\n```\n\n## @array string chips\n```typescript\n/**\n * Definition for an array of strings displayed as a chips list.\n */\nexport interface StringChipsArrayDecoratorConfig extends ArrayDecoratorConfig {\n    itemType: DecoratorTypes.STRING,\n    displayStyle: 'chips',\n\n    /**\n     * The icon used to remove an entry from the array.\n     *\n     * @default faCircleMinus\n     */\n    deleteIcon?: IconDefinition,\n    /**\n     * The minimum required length of the string.\n     */\n    minLength?: number,\n    /**\n     * The maximum required length of the string.\n     */\n    maxLength?: number,\n    /**\n     * A regex used for validation.\n     */\n    regex?: RegExp\n}\n```\n\n## @array string chips autocomplete\n```typescript\n/**\n * Definition for an array of autocomplete strings displayed as a chips list.\n */\nexport interface AutocompleteStringChipsArrayDecoratorConfig extends ArrayDecoratorConfig {\n    itemType: DecoratorTypes.STRING_AUTOCOMPLETE,\n    displayStyle: 'chips',\n\n    /**\n     * The icon used to remove an entry from the array.\n     *\n     * @default faCircleMinus\n     */\n    deleteIcon?: IconDefinition,\n    /**\n     * The autocomplete values.\n     */\n    autocompleteValues: string[],\n    /**\n     * The minimum required length of the string.\n     */\n    minLength?: number,\n    /**\n     * The maximum required length of the string.\n     */\n    maxLength?: number,\n    /**\n     * A regex used for validation.\n     */\n    regex?: RegExp\n}\n```\n\n## @array date\n```typescript\n/**\n * Definition for an array of Dates.\n */\nexport interface DateArrayDecoratorConfig extends ArrayDecoratorConfig {\n    itemType: DecoratorTypes.DATE,\n\n    /**\n     * The definition of the columns to display. Consists of the displayName to show in the header of the row\n     * and the value, which is a function that generates the value to display inside a column.\n     */\n    displayColumns: DisplayColumn\u003cDate\u003e[],\n\n    /**\n     * The label for the add button.\n     *\n     * @default 'Add'\n     */\n    addButtonLabel?: string,\n\n     /**\n      * The label for the remove button.\n      *\n      * @default 'Remove'\n      */\n    removeButtonLabel?: string,\n\n    /**\n     * The error-message to display when the array is required but contains no values.\n     */\n    missingErrorMessage?: string,\n\n    /**\n     * A function to get the minimum value of the date.\n     */\n    min?: (date?: Date) =\u003e Date,\n\n    /**\n     * A function to get the maximum value of the date.\n     */\n    max?: (date?: Date) =\u003e Date,\n\n    /**\n     * A filter function to do more specific filtering. This could be the removal of e.g. All weekends.\n     */\n    filter?: DateFilterFn\u003cDate | null | undefined\u003e\n}\n```\n\n## @array date time\n```typescript\n/**\n * Definition for an array of DateTimes.\n */\nexport interface DateTimeArrayDecoratorConfig extends ArrayDecoratorConfig {\n    itemType: DecoratorTypes.DATE_TIME,\n\n    /**\n     * The definition of the columns to display. Consists of the displayName to show in the header of the row\n     * and the value, which is a function that generates the value to display inside a column.\n     */\n    displayColumns: DisplayColumn\u003cDate\u003e[],\n\n    /**\n     * The label for the add button.\n     *\n     * @default 'Add'\n     */\n    addButtonLabel?: string,\n\n     /**\n      * The label for the remove button.\n      *\n      * @default 'Remove'\n      */\n    removeButtonLabel?: string,\n\n    /**\n     * The error-message to display when the array is required but contains no values.\n     */\n    missingErrorMessage?: string,\n\n    /**\n     * The selectable times.\n     */\n    times?: DropdownValue\u003cTime\u003e[],\n\n    /**\n     * The name to use as a label for the time form field.\n     *\n     * @default 'Time'\n     */\n    timeDisplayName?: string,\n\n    /**\n     * A function to get the minimum value of the date.\n     */\n    minDate?: (date?: Date) =\u003e Date,\n\n    /**\n     * A function to get the maximum value of the date.\n     */\n    maxDate?: (date?: Date) =\u003e Date,\n\n    /**\n     * A filter function to do more specific date filtering. This could be the removal of e.g. All weekends.\n     */\n    filterDate?: DateFilterFn\u003cDate | null | undefined\u003e,\n\n    /**\n     * A function to get the minimum value of the time.\n     */\n    minTime?: (date?: Date) =\u003e Time,\n\n    /**\n     * A function to get the maximum value of the time.\n     */\n    maxTime?: (date?: Date) =\u003e Time,\n\n    /**\n     * A filter function to do more specific time filtering. This could be e.g. The removal of lunch breaks.\n     */\n    filterTime?: ((time: Time) =\u003e boolean) | (() =\u003e boolean)\n}\n```\n\n## @array date range\n```typescript\n/**\n * Definition for an array of DateRanges.\n */\nexport interface DateRangeArrayDecoratorConfig extends ArrayDecoratorConfig {\n    itemType: DecoratorTypes.DATE_RANGE,\n\n    /**\n     * The definition of the columns to display. Consists of the displayName to show in the header of the row\n     * and the value, which is a function that generates the value to display inside a column.\n     */\n    displayColumns: DisplayColumn\u003cDateRange\u003e[],\n\n    /**\n     * The label for the add button.\n     *\n     * @default 'Add'\n     */\n    addButtonLabel?: string,\n\n     /**\n      * The label for the remove button.\n      *\n      * @default 'Remove'\n      */\n    removeButtonLabel?: string,\n\n    /**\n     * The error-message to display when the array is required but contains no values.\n     */\n    missingErrorMessage?: string,\n\n    /**\n     * A function to get the minimum value of the start date.\n     */\n    minStart?: (date?: Date) =\u003e Date,\n    /**\n     * A function to get the maximum value of the start date.\n     */\n    maxStart?: (date?: Date) =\u003e Date,\n    /**\n     * A function to get the minimum value of the end date.\n     */\n    minEnd?: (date?: Date) =\u003e Date,\n    /**\n     * A function to get the maximum value of the end date.\n     */\n    maxEnd?: (date?: Date) =\u003e Date,\n    /**\n     * A filter function to do more specific filtering on the disallowed end date values. This could be the removal of e.g. All weekends.\n     */\n    filter?: DateFilterFn\u003cDate\u003e,\n    /**\n     * The placeholder for the start date of the date range picker.\n     *\n     * @default \"Start\"\n     */\n    placeholderStart?: string,\n    /**\n     * The placeholder for the end date of the date range picker.\n     *\n     * @default \"End\"\n     */\n    placeholderEnd?: string\n}\n```\n\n## @file data\n```typescript\n/**\n * The type of any property annotated with @file.\n */\nexport type FileData = FileDataWithFile | FileDataWithUrl;\n```\n\n## @file\n```typescript\nabstract class FileDecoratorConfig extends PropertyDecoratorConfig {\n    /**\n     * Specifies whether or not the decorated property can have multiple files.\n     */\n    multiple!: boolean;\n\n    /**\n     * The type of the upload.\n     */\n    type!: 'image' | 'other';\n\n    /**\n     * The icon used to remove a file from the input.\n     *\n     * @default faCircleMinus\n     */\n    deleteIcon?: string;\n\n    /**\n     * Whether or not the file should be displayed inside a preview.\n     *\n     * @default true\n     */\n    preview?: boolean;\n\n    /**\n     * Specifies allowed File types like 'image/jpg' etc.\n     * Allows every file type if not set.\n     */\n    allowedMimeTypes?: string[];\n\n    /**\n     * The error dialog to display when the user inputs files that are not of the allowed mime types.\n     */\n    mimeTypeErrorDialog?: ConfirmDialogData;\n\n    /**\n     * The maximum allowed size of a single file in MB.\n     *\n     * @default 10\n     */\n    maxSize?: number;\n\n    /**\n     * The error dialog to display when the user inputs a single file that is bigger than the 'maxSize' value.\n     */\n    maxSizeErrorDialog?: ConfirmDialogData;\n\n    /**\n     * The maximum allowed size of all files in MB.\n     *\n     * @default 100\n     */\n    maxSizeTotal?: number;\n\n    /**\n     * The error dialog to display when the user inputs files which are in total bigger than the 'maxSizeTotal' value.\n     */\n    maxSizeTotalErrorDialog?: ConfirmDialogData;\n\n    /**\n     * Defines whether or not a dropdown box is displayed.\n     *\n     * @default true // when multiple is set to true.\n     * false // when multiple is set to false.\n     */\n    dragAndDrop?: boolean;\n}\n```\n\n## @file default\n```typescript\n/**\n * Definition for a default file.\n */\nexport interface DefaultFileDecoratorConfig extends FileDecoratorConfig {\n    type: 'other',\n    preview?: false\n}\n```\n\n## @file image\n```typescript\n/**\n * Definition for a image file.\n */\nexport interface ImageFileDecoratorConfig extends FileDecoratorConfig {\n    // eslint-disable-next-line jsdoc/require-jsdoc\n    type: 'image',\n    /**\n     * Specifies allowed File types like image/jpg etc. In a comma separated string.\n     *\n     * @default ['image/*']\n     */\n    allowedMimeTypes?: string[],\n    /**\n     * Url to the file that gets displayed in the preview when no file has been selected yet.\n     */\n    previewPlaceholderUrl?: string\n}\n```\n\n## @custom\nWit the custom decorator you have the freedom to build your own input components.\n\n### metadata\nThe @custom decorator gives you the option to provide additional metadata.\nIt also uses generics to provide type safety for you:\n\n```typescript\n// Somewhere outside the entity\n// This is the additional metadata to provide for the property.\ninterface MyCustomMetadata {\n    random: () =\u003e string\n}\n.\n.\n.\n// Somewhere inside the entity\n@custom\u003cstring, MyCustomMetadata, MyEntity\u003e({\n    customMetadata: {\n        // This is type safe because we defined two lines above that the custom metadata has the type \"MyCustomMetadata\"\n        random: () =\u003e (Math.random() + 1).toString(36).substring(7)\n    },\n    displayName: 'Random Value',\n    component: CustomInputComponent // will be defined below\n})\nrandomValue!: string;\n```\n### component\nThe component needs to extend the NgxMatEntityBaseInputComponent:\n```typescript\n@Component({\n    selector: 'custom-input-component',\n    templateUrl: './custom-input.component.html',\n    styleUrls: ['./custom-input.component.scss']\n})\nexport class CustomInputComponent\n    extends NgxMatEntityBaseInputComponent\u003cMyEntity, DecoratorTypes.CUSTOM, string, MyCustomMetadata\u003e\n    implements OnInit {\n    // Define your logic here.\n    // The base class already provides the entity and key values and handles getting the metadata.\n    // This is also type safe because we defined above that the custom metadata has the type \"MyCustomMetadata\"\n    // and the entity has the type \"MyEntity\"\n}\n```\n\n# NgxMatEntityInput Configuration\nWith the property input you can generate an input field based on the metadata you defined on your property.\n\u003cbr\u003e\nConfiguration options are:\n\n```typescript\n/**\n * The entity on which the property exists. Used in conjunction with the \"propertyKey\"\n * to determine the property for which the input should be generated.\n */\n@Input()\nentity!: EntityType;\n\n/**\n * The name of the property to generate the input for. Used in conjunction with the \"entity\".\n */\n@Input()\npropertyKey!: keyof EntityType;\n\n/**\n * (optional) A custom function to generate the error-message for invalid inputs.\n */\n@Input()\ngetValidationErrorMessage!: (model: NgModel) =\u003e string;\n\n/**\n * Whether to hide a value if it is omitted for creation.\n * Is used internally for the object property.\n */\n@Input()\nhideOmitForCreate?: boolean;\n\n/**\n * Whether to hide a value if it is omitted for editing.\n * Is used internally for the object property.\n */\n@Input()\nhideOmitForEdit?: boolean;\n```\n\n# NgxMatEntityTable Configuration\nWith the `ngx-mat-entity-table` component you can create a complete CRUD functionality for your entities.\n\u003cbr\u003e\nAs 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.\n\n```typescript\n/**\n * The base data of the ngx-mat-entity-table.\n */\nexport interface BaseData\u003cEntityType extends object\u003e {\n    /**\n     * The title of the table.\n     */\n    title: string,\n    /**\n     * The definition of the columns to display. Consists of the displayName to show in the header of the row\n     * and the value, which is a function that generates the value to display inside a column.\n     */\n    displayColumns: DisplayColumn\u003cEntityType\u003e[],\n    /**\n     * The Class of the service that handles the entities.\n     * Needs to be injectable and an extension of the \"EntityService\"-Class.\n     */\n    EntityServiceClass: EntityServiceClassNewable\u003cEntityType\u003e,\n    /**\n     * The Class of the entities to manage.\n     */\n    EntityClass?: EntityClassNewable\u003cEntityType\u003e,\n    /**\n     * The label on the search bar. Defaults to \"Search\".\n     */\n    searchLabel?: string,\n    /**\n     * The label on the button for adding new entities. Defaults to \"Create\".\n     */\n    createButtonLabel?: string,\n    /**\n     * Takes a custom edit method which runs when you click on a entity.\n     * If you don't need any special editing of entries you can also omit this.\n     * In that case a default edit dialog is generated.\n     */\n    edit?: (entity: EntityType) =\u003e unknown,\n    /**\n     * Takes a method to run when you click on the new button.\n     * If you don't need anything special you can also omit this.\n     * In that case a default create dialog is generated.\n     */\n    create?: (entity: EntityType) =\u003e unknown,\n    /**\n     * Defines how the search string of entities is generated.\n     */\n    searchString?: (entity: EntityType) =\u003e string,\n    /**\n     * Defines whether or not the user can add new entities.\n     *\n     * @default () =\u003e true\n     */\n    allowCreate?: () =\u003e boolean,\n    /**\n     * Defines whether or not the user can view this specific entity.\n     *\n     * @default () =\u003e true\n     */\n    allowRead?: (entity: EntityType) =\u003e boolean,\n    /**\n     * Defines whether or not the user can edit this specific entity.\n     *\n     * @default () =\u003e true\n     */\n    allowUpdate?: (entity: EntityType) =\u003e boolean,\n    /**\n     * Whether or not the user can delete this specific entity.\n     */\n    allowDelete?: (entity: EntityType) =\u003e boolean,\n    /**\n     * All Actions that you want to run on multiple entities can be defined here.\n     * (e.g. Download as zip-file or mass delete).\n     */\n    multiSelectActions?: MultiSelectAction\u003cEntityType\u003e[],\n    /**\n     * The Label for the button that opens all multi-actions.\n     */\n    multiSelectLabel?: string\n}\n\n/**\n * The data of the default create-dialog.\n */\nexport interface CreateData {\n    /**\n     * The title of the default create-dialog.\n     */\n    title?: string,\n    /**\n     * The label on the create-button of the default create-dialog. Defaults to \"Create\".\n     */\n    createButtonLabel?: string,\n    /**\n     * The label on the cancel-button for the default create-dialog. Defaults to \"Cancel\".\n     */\n    cancelButtonLabel?: string,\n    /**\n     * Whether or not the creation of an entry should require a confirm dialog.\n     */\n    createRequiresConfirmDialog?: boolean,\n    /**\n     * The data used to generate a confirmation dialog for the create action.\n     */\n    confirmCreateDialogData?: ConfirmDialogData\n}\n\n/**\n * The data of the default edit-dialog.\n */\nexport interface EditDialogData\u003cEntityType extends object\u003e {\n    /**\n     * The title of the default edit-dialog.\n     */\n    title?: (entity: EntityType) =\u003e string,\n    /**\n     * The label on the confirm-button of the default edit-dialog. Defaults to \"Save\".\n     */\n    confirmButtonLabel?: string,\n    /**\n     * The label on the delete-button of the default edit-dialog. Defaults to \"Delete\".\n     */\n    deleteButtonLabel?: string,\n    /**\n     * The label on the cancel-button for the default edit-dialog. Defaults to \"Cancel\".\n     */\n    cancelButtonLabel?: string,\n    /**\n     * Whether or not the deletion of an entry should require a confirm dialog.\n     */\n    deleteRequiresConfirmDialog?: boolean,\n    /**\n     * Whether or not the editing of an entry should require a confirm dialog.\n     */\n    editRequiresConfirmDialog?: boolean,\n\n    /**\n     * The data used to generate a confirmation dialog for the delete action.\n     */\n    confirmDeleteDialogData?: ConfirmDialogData,\n\n    /**\n     * The data used to generate a confirmation dialog for the delete action.\n     */\n    confirmEditDialogData?: ConfirmDialogData\n}\n\n/**\n * All the configuration data required to display a ngx-mat-entity-table.\n */\nexport interface TableData\u003cEntityType extends object\u003e {\n    /**\n     * The base data for the table-component.\n     * Includes stuff like the title for the table, what to display inside the rows etc.\n     */\n    baseData: BaseData\u003cEntityType\u003e,\n    /**\n     * The data for the default create-dialog.\n     * Can be omitted when specifying a custom \"create\" method inside the baseData.\n     */\n    createDialogData?: CreateData,\n    /**\n     * The data for the default edit-dialog.\n     * Can be omitted when specifying a custom \"edit\" method inside the baseData.\n     */\n    editDialogData?: EditDialogData\u003cEntityType\u003e\n}\n```\n\n## Display Columns\nThe definition of a column inside the table.\n```typescript\nexport interface DisplayColumn\u003cEntityType extends object\u003e {\n    /**\n     * The name inside the header.\n     */\n    displayName: string,\n    /**\n     * A method to get the value inside an row.\n     */\n    value: (entity: EntityType) =\u003e string\n}\n```\n\n## Multiselect Actions\nMultiselect Actions appear on the right upper corner and allow you to do actions on all selected entries.\n\n```typescript\nexport interface MultiSelectAction\u003cEntityType extends object\u003e {\n    /**\n     * The name of the action.\n     */\n    displayName: string,\n    /**\n     * The action itself.\n     */\n    action: (selectedEntities: EntityType[]) =\u003e Promise\u003cunknown\u003e,\n    /**\n     * A method that defines whether or not the action can be used.\n     *\n     * @default true\n     */\n    enabled?: (selectedEntities: EntityType[]) =\u003e boolean,\n    /**\n     * A method that defines whether or not a confirm dialog is needed to run the action.\n     *\n     * @default false\n     */\n    requireConfirmDialog?: (selectedEntities: EntityType[]) =\u003e boolean,\n    /**\n     * The data used to generate a confirmation dialog for the multiSelect action.\n     */\n    confirmDialogData?: ConfirmDialogData\n}\n```\n## Edit/Create in seperate page\nWhen handling entities that have a lot of properties, you might don't want to edit everything inside a dialog but in a separate page.\n\nFor that case, this library has a generic edit page. It works flawlessly with the table component, but you need to adjust some things.\nThe same procedure can also be used to define a create page.\n\n### 1. In the base data entry of your table config add `defaultEdit: 'page'`\n### 2. Add the route on which the entity should be edited:\n```typescript\nimport { defaultEditDataRoute, EditDataRoute, NGX_EDIT_DATA_ENTITY, NGX_EDIT_DATA_ENTITY_SERVICE, PageEditData } from 'ngx-material-entity';\n\n//...\n\nconst editMyEntityData: PageEditData\u003cMyEntity\u003e = {\n    editData: {\n        title: (entity: MyEntity) =\u003e `My Entity #${entity.id}`\n    }\n};\n\nconst editDataRoute: EditDataRoute = {\n    ...defaultEditDataRoute,\n    providers: [\n        {\n            provide: NGX_EDIT_DATA_ENTITY_SERVICE,\n            useExisting: MyEntityService\n        },\n        {\n            provide: NGX_EDIT_DATA_ENTITY,\n            useValue: MyEntity\n        },\n        {\n            provide: NGX_EDIT_DATA,\n            useValue: editMyEntityData\n        }\n    ]\n};\n```\nThe `defaultEditDataRoute` just provides values for things like path, title or loadComponent out of the box.\n\nThe providers array is needed for the route to access the relevant entity service, entity class and the configuration data.\n### 3. Use a custom route (optional)\nBy default, the configuration above will open any entities on the path `entities/:id`.\n\nAt some point you probably want to open them on different paths, eg. `my-entities/:id` for the example above.\n\nIn order to do that you need to add the custom path at two different places:\n\u003cbr\u003e\n- In the relevant EntityService:\n`override readonly editBaseRoute: string = 'my-entities';`\n\u003cbr\u003e\n- And in the route:\n```typescript\nimport { defaultEditDataRoute, EditDataRoute, NGX_EDIT_DATA_ENTITY, NGX_EDIT_DATA_ENTITY_SERVICE, PageEditData } from 'ngx-material-entity';\n\n//...\n\nconst editDataRoute: EditDataRoute = {\n    ...defaultEditDataRoute,\n    path: 'my-entities/:id',\n    providers: [\n        {\n            provide: NGX_EDIT_DATA_ENTITY_SERVICE,\n            useExisting: MyEntityService\n        },\n        {\n            provide: NGX_EDIT_DATA_ENTITY,\n            useValue: MyEntity\n        }\n    ]\n};\n```\n\n### 4. Require confirmation before leaving page with unsaved changes (optional)\nIf you want the user to confim abandoning their changes you can simply add the `UnsavedChangesGuard` to your route:\n\n```typescript\nimport { defaultEditDataRoute, EditDataRoute, NGX_EDIT_DATA_ENTITY, NGX_EDIT_DATA_ENTITY_SERVICE, PageEditData, UnsavedChangesGuard } from 'ngx-material-entity';\n\n//...\n\nconst editDataRoute: EditDataRoute = {\n    ...defaultEditDataRoute,\n    path: 'my-entities/:id',\n    providers: [\n        {\n            provide: NGX_EDIT_DATA_ENTITY_SERVICE,\n            useExisting: MyEntityService\n        },\n        {\n            provide: NGX_EDIT_DATA_ENTITY,\n            useValue: MyEntity\n        }\n    ],\n    canDeactivate: [UnsavedChangesGuard]\n};\n```","funding_links":[],"categories":["Third Party Components"],"sub_categories":["UI Libraries built on Material"],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FService-Soft%2Fngx-material-entity","html_url":"https://awesome.ecosyste.ms/projects/github.com%2FService-Soft%2Fngx-material-entity","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FService-Soft%2Fngx-material-entity/lists"}