MPage Array Input Component
The MPage Array Input Component provides a quick and simple implementation of the Angular Material Chips with form control example found at https://material.angular.io/components/chips/examples .
This component is handy if you need a data entry control for a list of string values.
Implementation
Implement the simple input component by adding the <mpage-array-input></mpage-array-input> element to your Angular HTML code and bind a string array variable to it.
<mpage-array-input label="Criteria Id's" [(ngModel)]="criteriaArray"></mpage-array-input>
User Entry
Typing values into the array input field can be a bit confusing at first. To add an item, type in your text. To add a second item, press the enter or tab key to add a new entry to the array. Items in the array cannot be modified however clicking the "x" next to the item removes it from the array.
Options Grid
| Item | Binding | Data Type | Description |
|---|---|---|---|
| class | Input | string | CSS class to apply to the field. |
| disabled | Input | boolean | Determines if data entry is disabled. |
| hint | Input | string | Optional hint label to display below field. |
| label | Input | string | Text to display in field to identify it to users |
| ngModel | Input/Output | string | The string variable used to store your user entry. |