Ngx Bootstrap Typeahead

Ngx Bootstrap Typeahead

A quick to use and highly configurable, easy-to-use Typeahead component is given by the ngx-bootstrap Typeahead directive.

TypeaheadDirective

selector

• [typeahead]

Inputs

• adaptivePosition- Boolean, adaptive position sets are used.
• container − string, A selector that specifies the element to which the type head must be appended.
• dropup − This attribute shows that the dropdown should be opened upwards, default:false.
• isAnimated − Boolean, turn on/off animation, default: false. IsAnimated.
• optionsListTemplate − TemplateRef is used for defining a template for the custom options list. Variables in the template: matches, itemTemplate, query.
• typeahead − Typeahead, the source of options, may be an array of strings, objects, or an external matching process observers.
• typeaheadAsync- Boolean can only be used if the typeahead attribute is an array observable. If true, choice loading will be asynchronized, otherwise - synchronized. If the options array is large, it makes true sense.
• typeaheadGroupField − string, if the source of the options is an array of objects, the name of the field containing the value of the group, matches will be grouped by this field when set.
• typeaheadHideResultsOnBlur- Boolean used to hide blur performance.
• typeaheadIsFirstItemActive − Boolean makes the first item in a list active. The:true default.
• TypaheadItemTemplate − TemplateRef is used to define a template for a custom item. The exposed template variables are called item and index.
• typeaheadLatinize- Boolean, match Latin symbols. The term s per will equate to super if true, and vice versa. Default: true.
• typeaheadMinLength − number, minimal number of characters to be entered before kick-in with typeahead. If set to 0, typeahead shows the focus with a complete list of choices (limited as normal by typeaheadOptionsLimit)
• typeaheadMultipleSearch − boolean, Can be used to perform a search of multiple items and have suggestion not for the whole value of the input but for the value that comes after a delimiter given by typeaheadMultipleSearchDelimiters attribute. This method can only be used in combination with the TypeaheadSingleWords option if the TypeaheadWordDelimiters and TypeaheadPhraseDelimiters vary from the TypeaheadMultipleSearchDelimiters option to prevent conflicts when multiple searches are delimited and when a single word is delimited.
• typeaheadMultipleSearchDelimiters - String can only be used in cases where the typeaheadMultipleSearch attribute is true. To know when to start a new search, set the multiple search delimiter. A comma defaults. If space has to be used, then specifically set the typeaheadWordDelimiters to something other than space because space is used by default, OR set the typeaheadSingleWords attribute to false if several queries do not need to be used together.
• typeaheadOptionField − string If the source of the options is an array of items, the name of the field that contains the value of the options, we use the array item as an option if it is absent from this field. Nested properties and methods are supported.
• typeaheadOptionsInScrollableView − number, Default value: 5, defines the number of options to be shown in the scroll view.
• typeaheadOptionsLimit − number, maximum choice list length of items. 20 is the default value.
• TypeaheadOrderBy − TypeaheadOrder, Used to define a match custom order. When the source option is an array of objects, a field must be set up for sorting. If the source option is a string array, a field for sorting is absent. It may be necessary to change the ordering direction to ascending or descending.
• typeaheadPhraseDelimiters - String can only be used if the typeaheadSingleWords attribute is true. Set the delimiter for the term to fit the exact phrase. Simple and double quotes by default.
• typeaheadScrollable- Boolean , Default value: false, determines whether typeahead is scrollable.
• typeaheadSelectFirstItem − boolean, Default value: true, fired when the list of options is opened and the user clicks Tab If the value is equal to true, the first or active item in the list is selected If the value is equal to false, the active item in the list or nothing is chosen.
• typeaheadSingleWords - Boolean, Default value: true, Can be used to search for words by adding a single white space between each character, such as 'C a l I f o r n I a' matches 'California'.
• typeaheadWaitMs - Number, minimal wait time after last character type until typeahead kicks-in
• typeaheadWordDelimiters −String can only be used if the typeaheadSingleWords attribute is true. Sets the word delimiter for words to divide. Space defaults

Outputs

• typeaheadLoading- fired when this component's 'busy' state has been changed, fired only in async mode, returns boolean.
• typeaheadNoResults − fired on each main event and returns true for matches that are not detected.
• TypeaheadOnBlur-fired when a blur happens. The active item is returned.
• TypeAheadOnSelect − fired when the option is selected, returns the object with this option's data.

Example

As we are going to use Typeahead, we have to update app.module.ts to use TypeaheadModule in the ngx-bootstrap Timepicker chapter.

In order to use the TypeaheadModule, update app.module.ts.

app.module.ts

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { AppComponent } from './app.component';
import { TestComponent } from './test/test.component';
import { AccordionModule } from 'ngx-bootstrap/accordion';
import { AlertModule,AlertConfig } from 'ngx-bootstrap/alert';
import { ButtonsModule } from 'ngx-bootstrap/buttons';
import { FormsModule } from '@angular/forms';
import { CarouselModule } from 'ngx-bootstrap/carousel';
import { CollapseModule } from 'ngx-bootstrap/collapse';
import { BsDatepickerModule, BsDatepickerConfig } from 'ngx-bootstrap/datepicker';
import { BsDropdownModule,BsDropdownConfig } from 'ngx-bootstrap/dropdown';
import { PaginationModule,PaginationConfig } from 'ngx-bootstrap/pagination';
import { PopoverModule, PopoverConfig } from 'ngx-bootstrap/popover';
import { ProgressbarModule,ProgressbarConfig } from 'ngx-bootstrap/progressbar';
import { RatingModule, RatingConfig } from 'ngx-bootstrap/rating';
import { SortableModule, DraggableItemService } from 'ngx-bootstrap/sortable';
import { TabsModule, TabsetConfig } from 'ngx-bootstrap/tabs';
import { TimepickerModule } from 'ngx-bootstrap/timepicker';
import { TypeaheadModule } from 'ngx-bootstrap/typeahead';

@NgModule({
   declarations: [
      AppComponent,
      TestComponent
   ],
   imports: [
      BrowserAnimationsModule,
      BrowserModule,
      AccordionModule,
      AlertModule,
      ButtonsModule,
      FormsModule,
      CarouselModule,
      CollapseModule,
      BsDatepickerModule.forRoot(),
      BsDropdownModule,
      ModalModule,
      PaginationModule,
      PopoverModule,
      ProgressbarModule,
      RatingModule,
      SortableModule,
      TabsModule,
      TimepickerModule.forRoot(),
      TypeaheadModule.forRoot()
   ],
   providers: [AlertConfig, 
      BsDatepickerConfig, 
      BsDropdownConfig,
      BsModalService,
      PaginationConfig,
      ProgressbarConfig,
      RatingConfig,
      DraggableItemService,
      TabsetConfig],
   bootstrap: [AppComponent]
})
export class AppModule { }

Update test.component.html to use the timepicker component.

test.component.html

<input [(ngModel)]="selectedState"
   [typeahead]="states"
   class="form-control">
<pre class="card card-block card-header mb-3">Model: {{selectedState | json}}</pre>

Update test.component.ts for corresponding variables and methods.

test.component.ts

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

@Component({
   selector: 'app-test',
   templateUrl: './test.component.html',
   styleUrls: ['./test.component.css']
})
export class TestComponent implements OnInit {
   selectedState: string;
   states: string[] = ['Alabama','Alaska','Arizona','Arkansas','California','Colorado',
   'Connecticut','Delaware','Florida','Georgia','Hawaii','Idaho','Illinois',
   'Indiana','Iowa','Kansas','Kentucky','Louisiana','Maine',
   'Maryland','Massachusetts','Michigan','Minnesota','Mississippi',
   'Missouri','Montana','Nebraska','Nevada','New Hampshire','New Jersey',
   'New Mexico','New York','North Dakota','North Carolina','Ohio',
   'Oklahoma','Oregon','Pennsylvania','Rhode Island','South Carolina',
   'South Dakota','Tennessee','Texas','Utah','Vermont',
   'Virginia','Washington','West Virginia','Wisconsin','Wyoming'];
   constructor() {}
   ngOnInit(): void {
   } 
}

Build and Serve

Run the following command to start the angular server.

ng serve