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
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 |
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
1 2 3 4 5 6 7 8 9 10 |
<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> |
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
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 |
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