Get unlimited public & private packages + package-based permissions with npm Pro.Get started »

ngx-mat-typeahead

1.0.2 • Public • Published

NgxMatTypeahead

Update: This library is Ivy Compatible and is tested against an Angular 9 app. (check example in angular_v9 branch)

  • A simple typeahead directive to be used with Angular Material input and matAutocomplete component.
  • This directives enhances the funtionality of Angular Material matAutocomplete component and is recommended that it is used with it.
  • However, this directive can be used with any other autocomplete component.
  • It is developed using Angular >=6.0.0 and its newly introduced ng g library schematics.
  • This library is part of MatTypeahead project and it is generated with Angular CLI version 6.0.3.
  • Library location: projects/ngx-mat-typeahead directory of this repository.

Examples/Demo

  • A simple Example can be found under src/app directory of this repository. It uses json-server to have a url and filter functionality.

Installation

npm i ngx-mat-typeahead

API

import { NgxMatTypeaheadModule } from 'ngx-mat-typeahead'
selector: NgxMatTypeahead

@Inputs()

Input Type Required Description
apiURL string YES the url of a remote server that supports http/jsonp calls.
delayTime number Optional, default: 300 the debounce time for this request.
urlParams object Optional, default: {} { key: string, value: any} object as additional parameters
urlQueryParam string Optional, default: 'query' a string value which is used a query parameter in the url. Ex: http://localhost:3000/countries?query='c
apiMethod string Optional, default: 'get' the http/jsonp method to be used.
apiType string Optional, default: 'http' http or jsonp method types.
callbackFuncName string Optional a string value for the callback query parameter.
allowEmptyString boolean Optional, default: true if true, it allows empty strings to pass and invoke search

@Outputs()

Output Type Required Description
filteredDataList Array YES emits filtered data list depending on the search term.

Usage

  1. Register the NgxMatTypeaheadModule in your app module.

import { NgxMatTypeaheadModule } from 'ngx-mat-typeahead'

import { HttpClientModule } from '@angular/common/http';
import { NgModule } from '@angular/core';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
import { MatAutocompleteModule, MatInputModule } from '@angular/material';
import { BrowserModule } from '@angular/platform-browser';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { NgxMatTypeaheadModule } from 'ngx-mat-typeahead';
import { AppComponent } from './app.component';
 
@NgModule({
 declarations: [AppComponent],
 imports: [
   BrowserModule,
   BrowserAnimationsModule,
   FormsModule,
   ReactiveFormsModule,
   MatInputModule,
   MatAutocompleteModule,
   HttpClientModule,
   NgxMatTypeaheadModule
 ],
 providers: [],
 bootstrap: [AppComponent]
})
export class AppModule {}
  1. Use the directive (NgxMatTypeahead) in your component.
import { Component, OnInit } from '@angular/core';
import { FormControl, FormGroup } from '@angular/forms';
import { AppService } from './app.service';
@Component({
  selector: 'mat-ta-root',
  template: `<h3>NgxMatTypeahead demo app using Angular Material</h3>
<div [formGroup]="testFormGroup">
  <mat-form-field>
    <input matInput NgxMatTypeahead [apiURL]="url" [urlQueryParam]="queryParam" (filteredDataList)="getFilteredSuggestions($event)"
      formControlName="country" [matAutocomplete]="countryAuto" placeholder="Choose Country">
    <mat-autocomplete #countryAuto="matAutocomplete">
      <mat-option *ngFor="let country of countries" [value]="country">
        {{country}}
      </mat-option>
    </mat-autocomplete>
  </mat-form-field>
</div>
`,
  styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {
  // Paramteres for the input type are defined below. The url is generated using `json-server`.
  // Please run your own instance of the json-server to use the the below url.
  queryParam = 'q';
  url = 'http://localhost:3000/countries';
 
  constructor(private appService: AppService) {}
 
  testFormGroup: FormGroup = new FormGroup({ country: new FormControl('') });
  countries: Array<string> = [];
 
  ngOnInit() {
    this.countries = ["United States", "United Kingdom", "China", "Japan", "India", "Russia", "Canada", "Brazil"];
  }
 
  getFilteredSuggestions(filteredDataLst: Array<any>) {
    this.countries = [...filteredDataLst];
  }
}

Running the example in local env

  • npm i
  • Run ng serve for a dev server and running the demo app. Navigate to http://localhost:4200/. The app will automatically reload if you change any of the source files.
  • The demo app uses json-server module for enabling the url and filter funtionality. Make sure you have json-server installed and running.
  • Once you have installed json-server, Run: json-server --watch db.json. You can see it running at http://localhost:3000.

Build the NgxMatTypeahead module

Run ng build NgxMatTypeahead to build the library. The build artifacts will be stored in the dist/ngx-mat-typeahead directory. Use the --prod flag for a production build.

Running unit tests

Run ng test NgxMatTypeahead to execute the unit tests via Karma.

Credits

This project is based on ngx-typeahead. I want to thank Oren Farhi from Orizens for open sourcing his project as it helped me to write my first simple Angular library. Also want to thanks entire Angular team for creating this awesome framework.

Install

npm i ngx-mat-typeahead

DownloadsWeekly Downloads

3

Version

1.0.2

License

MIT

Unpacked Size

240 kB

Total Files

30

Last publish

Collaborators

  • avatar