npm i ngx-chips

app.module.ts

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
import { TagInputModule } from 'ngx-chips';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';

import { AppComponent } from './app.component';
import { HelloComponent } from './hello.component';
import { TagInputComponent } from './shared/tag-input/tag-input.component';

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

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

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

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

import { TagInputModule } from 'ngx-chips';

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

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

import { HelloComponent } from './hello.component';

import { TagInputComponent } from './shared/tag-input/tag-input.component';

@NgModule({

imports: [

BrowserModule,

TagInputModule,

BrowserAnimationsModule,

FormsModule,

ReactiveFormsModule,

declarations: [ AppComponent, HelloComponent, TagInputComponent ],

bootstrap: [ AppComponent ]

})

export class AppModule { }

app.component.ts

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

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

@Component({
  selector: 'app-tag-input',
  templateUrl: './tag-input.component.html',
  styleUrls: ['./tag-input.component.css']
})
export class TagInputComponent implements OnInit {

  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-tag-input',

templateUrl: './tag-input.component.html',

styleUrls: ['./tag-input.component.css']

})

export class TagInputComponent implements OnInit {

public items = [

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

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

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

];

constructor() { }

ngOnInit() {

}

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>

Angular ngx-chips Example to Build Autocomplete Tag Input Form Field With Dropdown in Browser

FULL SOURCE CODE

Comments

Leave a Reply Cancel reply

Archives