angularbootstrap-4angular-uiui-select2

how to convert to an editable select box?


i have an angular 5 project with bootstrap. in one of my component html i have a select box. when i click on it a list of drop down items are displayed and i can choose one . however i want the user to type for some string so that the drop down items can be narrowed down. here is my current code snippet any idea how can i convert the select box to an editable one .

   <select formControlName="contactList" [compareWith]="compareResource">
      <option value="" disabled>{{ 'PLACEHOLDERS.CONTACT_LIST' | translate }}</option>
      <option *ngFor="let contactList of contactLists" [ngValue]="contactList">{{ contactList.name }}</option>
    </select>

i want to convert the existing select box code to editable select box. please share your thoughts on this . i am very much new to UI programming. thank you


Solution

  • This can be achieved by using ng-select

    Install ng-select

    npm install --save @ng-select/ng-select
    

    app.module.ts

    Import it to the module

    import { CommonModule } from '@angular/common';
    import { NgModule } from '@angular/core';
    import { FormsModule } from '@angular/forms';
    import { BrowserModule } from '@angular/platform-browser';
    import { NgSelectModule } from '@ng-select/ng-select';
    
    import { AppComponent } from './app.component';
    
    @NgModule({
      declarations: [
        AppComponent,
      ],
      imports: [
        BrowserModule,
        FormsModule,
        CommonModule,
        NgSelectModule,
      ],
      providers: [],
      bootstrap: [AppComponent]
    })
    export class AppModule { }
    

    style.css

    import the ng-select default styling

    @import "~@ng-select/ng-select/themes/default.theme.css";
    

    app.component.html

    Create the ng-select dropdown by binding nameList as the items array for the dropdown and search function

    <div style="text-align:center">
      Editable Dropdown
    </div>
    
    <div style="width:300px; height:200px">
      <ng-select class="autocomplete" dropdownPosition="bottom" [searchFn]="searchName" [items]="nameList"
        [(ngModel)]="selectedName" [dropdownPosition]="'auto'">
        <ng-template ng-header-tmp>
          <div class="container-fluid">
            <div class="row">
              <div class="col-md-6">Username</div>
            </div>
          </div>
        </ng-template>
        <ng-template ng-label-tmp let-item="item">
          <span>{{item}}</span>
        </ng-template>
        <ng-template ng-option-tmp let-item="item" let-index="index">
          <div class="container-fluid">
            <div class="row">
              <div class="col-md-4">{{item}}</div>
            </div>
          </div>
        </ng-template>
      </ng-select>
    </div>
    

    app.component.ts

    Initialize the nameList and define the search function. Here I will return names which contain the value entered from the dropdown

    import { Component, OnInit } from '@angular/core';
    
    @Component({
      selector: 'app-root',
      templateUrl: './app.component.html',
      styleUrls: ['./app.component.css'],
    })
    export class AppComponent implements OnInit {
      selectedName: string;
      nameList: string[];
    
      constructor() { }
    
      ngOnInit() {
        this.nameList = this.getNameList();
      }
    
      getNameList(): string[] {
        return [
          'Adam',
          'Alex',
          'Bob',
          'Bennt',
          'Cathrina',
          'Dug',
          'Suzzy',
          'Amy',
          'Milan'
        ];
      }
    
      searchName(filter: string, item: string) {
        filter = filter.toLocaleLowerCase();
        return (item.toLocaleLowerCase().indexOf(filter) > -1);
      }
    }