# @ng-dynamic-forms/ui-material

> Material UI package for NG Dynamic Forms

Latest version **18.0.0** (published 2023-08-15) · ISC license · 0 weekly downloads

## Install

```sh
npm install @ng-dynamic-forms/ui-material
pnpm add @ng-dynamic-forms/ui-material
yarn add @ng-dynamic-forms/ui-material
bun add @ng-dynamic-forms/ui-material
```

## Health

**Score 25/100 (F)** — status: abandoned.

Positive: has types; esm support; no vulnerabilities.

Warnings: low downloads.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 18.0.0 |
| Published | 2023-08-15 |
| First published | 2017-09-14 |
| Weekly downloads | 0 |
| License | ISC |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 1 |
| Unpacked size | 447.7 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 1307 |
| Author | Udo Schöfer |
| Maintainers | ng-dynamic-forms |
| Keywords | angular, dynamic forms, forms, material, ng dynamic forms, reactive forms, ui |

## Links

- npm: https://www.npmjs.com/package/@ng-dynamic-forms/ui-material
- Repository: https://github.com/udos86/ng-dynamic-forms
- Homepage: https://github.com/udos86/ng-dynamic-forms#readme
- Issues: https://github.com/udos86/ng-dynamic-forms/issues
- npm.io page: https://npm.io/package/@ng-dynamic-forms/ui-material

## Dependencies (1)

- [tslib](https://npm.io/package/tslib.md) ^2.0.0

## Alternatives

- [@sindresorhus/slugify](https://npm.io/package/@sindresorhus/slugify.md) — 3.7M weekly downloads
- [solid-js](https://npm.io/package/solid-js.md) — 2.7M weekly downloads
- [expo-glass-effect](https://npm.io/package/expo-glass-effect.md) — 2.5M weekly downloads
- [nanoassert](https://npm.io/package/nanoassert.md) — 780.8K weekly downloads
- [@ffmpeg/ffmpeg](https://npm.io/package/@ffmpeg/ffmpeg.md) — 529.5K weekly downloads

## Recent versions

- 18.0.0 (latest) — 2023-08-15
- 8.0.1-beta (beta) — 2019-04-23
- 17.0.0 — 2023-01-02
- 16.0.0 — 2022-12-03
- 15.0.0 — 2022-04-05
- 14.0.1 — 2021-07-01
- 14.0.0 — 2021-06-26
- 13.0.0 — 2020-12-26
- 12.0.0 — 2020-07-18
- 11.0.3 — 2020-04-30
- 11.0.2 — 2020-04-30
- 11.0.1 — 2020-04-15
- 11.0.0 — 2020-04-15
- 10.1.0 — 2019-11-27
- 10.0.0 — 2019-11-25
- … 51 more at https://npm.io/package/@ng-dynamic-forms/ui-material/versions

## README

# NG Dynamic Forms Material UI

## Installation
```
npm i @ng-dynamic-forms/ui-material -S
```

## Import
```ts
@NgModule({

    imports: [DynamicFormsMaterialUIModule]
})

export class AppModule {}
```

## Usage

with **`DynamicMaterialFormComponent`**:
```ts
<form [formGroup]="myFormGroup">

    <dynamic-material-form [group]="myFormGroup"
                           [model]="myFormModel"></dynamic-material-form>
</form>
```

with **`DynamicMaterialFormControlComponent`**:
```ts
<form [formGroup]="myFormGroup">

    <dynamic-material-form-control *ngFor="let controlModel of myFormModel"
                                   [group]="myFormGroup"
                                   [model]="controlModel"></dynamic-material-form-control>
</form>
```

## Form Controls

|                                      Control                                      	|            Model            	| Required Property 	|
|:---------------------------------------------------------------------------------:	|:---------------------------:	|:-----------------:	|
| **[Autocomplete](https://material.angular.io/components/component/autocomplete)** 	| `DynamicInputModel`         	|       `list`      	|
|     **[Checkbox](https://material.angular.io/components/component/checkbox)**     	| `DynamicCheckboxModel`      	|         –         	|
|  **[Checkbox Group](https://material.angular.io/components/component/checkbox)**  	| `DynamicCheckboxGroupModel` 	|         –         	|
|        **[Chips](https://material.angular.io/components/component/chips)**        	| `DynamicInputModel`         	|  `multiple: true` 	|
|   **[Datepicker](https://material.angular.io/components/component/datepicker)**   	| `DynamicDatePickerModel`    	|         –         	|
|        **[Input](https://material.angular.io/components/component/input)**        	| `DynamicInputModel`         	|         –         	|
|     **[Radio Group](https://material.angular.io/components/component/radio)**     	| `DynamicRadioGroupModel`    	|         –         	|
|       **[Select](https://material.angular.io/components/component/select)**       	| `DynamicSelectModel`        	|         –         	|
|       **[Slider](https://material.angular.io/components/component/slider)**       	| `DynamicSliderModel`        	|         –         	|
|  **[SlideToggle](https://material.angular.io/components/component/slide-toggle)** 	| `DynamicSwitchModel`        	|         –         	|
|       **[Textarea](https://material.angular.io/components/component/input)**      	| `DynamicTextAreaModel`      	|         –         	|

## Custom UI Events
```ts
<form [formGroup]="myFormGroup">

    <dynamic-material-form [group]="myFormGroup"
                           [model]="myFormModel"
                           (matEvent)="onMatEvent($event)"></dynamic-material-form>
</form>
```

## Resources

* [**API Documentation**](http://ng2-dynamic-forms.udos86.de/docs/ui-material/)
* [**Live Sample**](http://ng2-dynamic-forms.udos86.de/sample/index.aot.html#material-sample-form)

---
_Source: https://npm.io/package/@ng-dynamic-forms/ui-material · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._