Skip to content

WebNinjaDeveloper.com

Programming Tutorials




Menu
  • Home
  • Youtube Channel
  • Official Blog
  • Nearby Places Finder
  • Direction Route Finder
  • Distance & Time Calculator
Menu

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

Posted on January 26, 2023

 

 

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

 

 

TypeScript
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

 

 

TypeScript
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

 

 

 

Recent Posts

  • Angular 14/15 JWT Login & Registration Auth System in Node.js & Express Using MongoDB in Browser
  • Build a JWT Login & Registration Auth System in Node.js & Express Using MongoDB in Browser
  • React-Admin Example to Create CRUD REST API Using JSON-Server Library in Browser Using Javascript
  • Javascript Papaparse Example to Parse CSV Files and Export to JSON File and Download it as Attachment
  • Javascript Select2.js Example to Display Single & Multi-Select Dropdown & Fetch Remote Data Using Ajax in Dropdown
  • Angular
  • Bunjs
  • C#
  • Deno
  • django
  • Electronjs
  • java
  • javascript
  • Koajs
  • kotlin
  • Laravel
  • meteorjs
  • Nestjs
  • Nextjs
  • Nodejs
  • PHP
  • Python
  • React
  • ReactNative
  • Svelte
  • Tutorials
  • Vuejs




©2023 WebNinjaDeveloper.com | Design: Newspaperly WordPress Theme