ngx-mat-tag-input
TypeScript icon, indicating that this package has built-in type declarations

0.0.2 • Public • Published

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

  1. Import the NgxMatTagInputModule in your app module.

import { NgxMatTagInputModule } from 'ngx-mat-tag-input'

import {BrowserModule} from '@angular/platform-browser';
import {NgModule} from '@angular/core';
import {BrowserAnimationsModule} from '@angular/platform-browser/animations';
 
import {AppRoutingModule} from './app-routing.module';
import {AppComponent} from './app.component';
 
import {NgxMatTagInputModule} from 'ngx-mat-tag-input';
 
@NgModule({
 declarations: [
   AppComponent
 ],
 imports: [
   BrowserModule,
   BrowserAnimationsModule,
   AppRoutingModule,
   NgxMatTagInputModule
 ],
 providers: [],
 bootstrap: [AppComponent]
})
export class AppModule {
}
  1. Use the input (NgxMatTagInput) in your component.
import {Component} from '@angular/core';
 
@Component({
  selector: 'app-root',
    template: `
      <div class="container">
        <h3>NgxMatTagInput</h3>
        <ngx-mat-tag-input #aa (change)="change($event)"
                           [items]="autoCompleteTags" [selectedTags]="selectedValues" appearance="outline"
                           placeholder="Search Javascript framework"></ngx-mat-tag-input>
      </div>
    `,
  styleUrls: ['./app.component.scss']
})
export class AppComponent {
  public autoCompleteTags = ['Angular', 'React', 'VueJs', 'Meteor', 'Ember.js', 'Aurelia', 'Backbone.js'];
  public selectedValues = ['Angular'];
 
  change($event) {
    console.log($event)
  }
}

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.

Package Sidebar

Install

npm i ngx-mat-tag-input

Weekly Downloads

50

Version

0.0.2

License

MIT

Unpacked Size

227 kB

Total Files

34

Last publish

Collaborators

  • adnane.lamghari