NgxMatTagInput
Angular tags input based on Angular Material auto-complete and chips.
- Library location :
projects/ngx-mat-tag-input
directory of this repository. - Working example location :
projects/demo
directory of this repository.
Demo
- Working example location :
projects/demo
directory of this repository. - Stackblitz
Installation
npm i ngx-mat-tag-input
API
import { NgxMatTagInputModule } from 'ngx-mat-tag-input'
selector: ngx-mat-tag-input
@Inputs()
Input | Type | Required | Description |
---|---|---|---|
items | array | Optional | Array of the auto-complete items |
selectedTags | array | Optional | Array of the selected items bu default |
appearance | MatFormFieldAppearance | Optional | The form-field appearance style. |
readonly | boolean | Optional, default: false | Whether the element is readonly. |
placeholder | string | Optional | The placeholder for this control. |
displayBy | string | Optional | Attribute's name to display when items are Objects |
isLoading | boolean | Optional, default: false | When true, a spinner with be displayed in the suggested list |
@Outputs()
Output | Description |
---|---|
reset | Emits when when the user resets a form. |
ngModelChange | Emits when when the view model updates. |
change | Emits when the contents of the input have changed. |
select | Emits when the an item from the auto-complete list is selected. |
focus | Emits when the input receives focus. |
touched | Emits when the user touches the input. |
Usage
- Import the
NgxMatTagInputModule
in your app module.
import { NgxMatTagInputModule } from 'ngx-mat-tag-input'
;;; ;; ;
- Use the input
(NgxMatTagInput)
in your component.
;
Build
Run ng build ngx-mat-tag-input
to build the library. The build artifacts will be stored in the dist/ngx-mat-tag-input
directory. Use the --prod
flag for a production build.
Running unit tests
Run ng test ngx-mat-tag-input
to execute the unit tests via Karma.