Angular tags input for Material Angular


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.


  • Working example location : projects/demo directory of this repository.
  • Stackblitz


npm i ngx-mat-tag-input


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


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


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.


  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';

 declarations: [
 imports: [
 providers: [],
 bootstrap: [AppComponent]
export class AppModule {
  1. Use the input (NgxMatTagInput) in your component.
import {Component} from '@angular/core';

  selector: 'app-root',
    template: `
      <div class="container">
        <ngx-mat-tag-input #aa (change)="change($event)"
                           [items]="autoCompleteTags" [selectedTags]="selectedValues" appearance="outline"
                           placeholder="Search Javascript framework"></ngx-mat-tag-input>
  styleUrls: ['./app.component.scss']
export class AppComponent {
  public autoCompleteTags = ['Angular', 'React', 'VueJs', 'Meteor', 'Ember.js', 'Aurelia', 'Backbone.js'];
  public selectedValues = ['Angular'];

  change($event) {


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.

Download Details:

Author: adnanelamghari

Live Demo:


#angular #javascript #angularjs

Angular tags input for Material Angular
40.05 GEEK