Angular 14 ngx-chips Example to Build Material Tag Input Field With Autocomplete in Browser Using TypeScript

Welcome folks today in this blog post we will be using the ngx-chips library to build material tag input field with autocomplete in browser using typescript. All the full source code of the application is shown below.

Get Started

In order to get started you need to make a new angular project using the below command as shown below

ng new sampleapp

cd sampleapp

And now you need to install the below library using the npm command as shown below

npm i ngx-chips

After that you will see the below directory structure of the angular app as shown below

Now we need to go to app.module.ts file and include the following modules inside the imports array as shown below

app.module.ts

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { TagInputModule } from 'ngx-chips';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations'; // this is needed!
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
import { AppComponent } from './app.component';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    BrowserAnimationsModule,
    FormsModule,
    ReactiveFormsModule,
    TagInputModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

import { NgModule } from '@angular/core';

import { BrowserModule } from '@angular/platform-browser';

import { TagInputModule } from 'ngx-chips';

import { BrowserAnimationsModule } from '@angular/platform-browser/animations'; // this is needed!

import { FormsModule, ReactiveFormsModule } from '@angular/forms';

import { AppComponent } from './app.component';

@NgModule({

declarations: [

AppComponent

imports: [

BrowserModule,

BrowserAnimationsModule,

FormsModule,

ReactiveFormsModule,

TagInputModule

providers: [],

bootstrap: [AppComponent]

})

export class AppModule { }

As you can see we need the browserAnimations and FormsModule & ReactiveFormsModule of angular for this library as we are working with animations and the forms inside the browser and also we are including the ngx-chips module as well inside the imports array.

Now we need to go to app.component.html file and copy paste the below html as shown below

app.component.html

<div class="force-to-the-bottom">
  <tag-input [ngModel]="['hardocoded-item']">
    <tag-input-dropdown
      [autocompleteItems]="items"
      [showDropdownIfEmpty]="true"
      [dynamicUpdate]="false"
    >
    </tag-input-dropdown>
  </tag-input>
</div>

<tag-input [ngModel]="['hardocoded-item']">

<tag-input-dropdown

[autocompleteItems]="items"

[showDropdownIfEmpty]="true"

[dynamicUpdate]="false"

</tag-input-dropdown>

</tag-input>

</div>

As you can see we are using the tag-input directive inside the html and here we are passing the items that we will be configuring inside the typescript file later on and then we have the autocomplete option as well to show autocomplete inside the input field. And then we have the option to show the dropdown if empty.

And now we need to edit the code inside the app.component.ts file and copy paste the below code

app.component.ts

import { Component, OnInit } from '@angular/core';

export interface AutoCompleteModel {
  value: any;
  display: string;
}

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {
  title = 'sampleapp';

  public items = [
    {display: 'Pizza', value: 1},
    {display: 'Pasta', value: 2},
    {display: 'Parmesan', value: 3},
  ];

  constructor() { }

  ngOnInit() {
  }
}

import { Component, OnInit } from '@angular/core';

export interface AutoCompleteModel {

value: any;

display: string;

}

@Component({

selector: 'app-root',

templateUrl: './app.component.html',

styleUrls: ['./app.component.css']

})

export class AppComponent implements OnInit {

title = 'sampleapp';

public items = [

{display: 'Pizza', value: 1},

{display: 'Pasta', value: 2},

{display: 'Parmesan', value: 3},

];

constructor() { }

ngOnInit() {

}

As you can see we are declaring the autocomplete interface where we are declaring the schema of the data we will be having two fields first one will be the display name and the next one will be the value. And now after that we are declaring the data inside an array of items.

Now if you run the angular app using the below command as shown below

ng serve