{"id":23508642,"url":"https://github.com/mrsan22/ngxmattypeahead","last_synced_at":"2025-04-16T14:39:40.570Z","repository":{"id":32482510,"uuid":"134758861","full_name":"mrsan22/NgxMatTypeahead","owner":"mrsan22","description":"A typeahead directive to be used with Angular Material input and matAutocomplete component.","archived":false,"fork":false,"pushed_at":"2023-01-01T03:49:34.000Z","size":3390,"stargazers_count":13,"open_issues_count":23,"forks_count":22,"subscribers_count":3,"default_branch":"master","last_synced_at":"2025-04-08T04:45:45.287Z","etag":null,"topics":["angular","angular-material","directive","typeahead","typescript"],"latest_commit_sha":null,"homepage":"https://www.npmjs.com/package/ngx-mat-typeahead","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/mrsan22.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2018-05-24T19:16:46.000Z","updated_at":"2023-11-03T07:04:46.000Z","dependencies_parsed_at":"2023-01-14T21:21:31.449Z","dependency_job_id":null,"html_url":"https://github.com/mrsan22/NgxMatTypeahead","commit_stats":null,"previous_names":[],"tags_count":3,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mrsan22%2FNgxMatTypeahead","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mrsan22%2FNgxMatTypeahead/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mrsan22%2FNgxMatTypeahead/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mrsan22%2FNgxMatTypeahead/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/mrsan22","download_url":"https://codeload.github.com/mrsan22/NgxMatTypeahead/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":249250939,"owners_count":21237965,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["angular","angular-material","directive","typeahead","typescript"],"created_at":"2024-12-25T11:25:24.937Z","updated_at":"2025-04-16T14:39:40.551Z","avatar_url":"https://github.com/mrsan22.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# NgxMatTypeahead\n\n**Update**: This library is Ivy Compatible and is tested against an Angular 9 app. (check example in angular_v9 branch)\n\n* A simple typeahead `directive` to be used with Angular Material input and matAutocomplete component.\n* This directives enhances the funtionality of Angular Material `matAutocomplete` component and is recommended that it is used with it.\n* However, this directive can be used with `any other` autocomplete component.\n* It is developed using `Angular \u003e=6.0.0` and its newly introduced `ng g library` schematics.\n* This library is part of MatTypeahead project and it is generated with [Angular CLI](https://github.com/angular/angular-cli) version 6.0.3.\n* Library location: `projects/ngx-mat-typeahead` directory of this repository.\n\n## Examples/Demo\n\n* A simple Example can be found under `src/app` directory of this repository. It uses `json-server` to have a url and filter functionality.\n\n## Installation\n\n`npm i ngx-mat-typeahead`\n\n## API\n\n`import { NgxMatTypeaheadModule } from 'ngx-mat-typeahead'`\u003cbr\u003e\n`selector: NgxMatTypeahead`\n\n### @Inputs()\n\n| Input            | Type    | Required                   | Description                                                                                               |\n| ---------------- | ------- | -------------------------- | --------------------------------------------------------------------------------------------------------- |\n| apiURL           | string  | **YES**                    | the url of a remote server that supports http/jsonp calls.                                                |\n| delayTime        | number  | Optional, default: 300     | the debounce time for this request.                                                                       |\n| urlParams        | object  | Optional, default: {}      | { key: string, value: any} object as additional parameters                                                |\n| urlQueryParam    | string  | Optional, default: 'query' | a string value which is used a query parameter in the url. Ex: `http://localhost:3000/countries?query='c` |\n| apiMethod        | string  | Optional, default: 'get'   | the http/jsonp method to be used.                                                                         |\n| apiType          | string  | Optional, default: 'http'  | http or jsonp method types.                                                                               |\n| callbackFuncName | string  | Optional                   | a string value for the callback query parameter.                                                          |\n| allowEmptyString | boolean | Optional, default: true    | if true, it allows empty strings to pass and invoke search                                                |\n\n### @Outputs()\n\n| Output           | Type       | Required | Description                                            |\n| ---------------- | ---------- | -------- | ------------------------------------------------------ |\n| filteredDataList | Array\u003cany\u003e | **YES**  | emits filtered data list depending on the search term. |\n\n## Usage\n\n1) Register the `NgxMatTypeaheadModule` in your app module.\n \u003e `import { NgxMatTypeaheadModule } from 'ngx-mat-typeahead'`\n\n ```typescript\n import { HttpClientModule } from '@angular/common/http';\nimport { NgModule } from '@angular/core';\nimport { FormsModule, ReactiveFormsModule } from '@angular/forms';\nimport { MatAutocompleteModule, MatInputModule } from '@angular/material';\nimport { BrowserModule } from '@angular/platform-browser';\nimport { BrowserAnimationsModule } from '@angular/platform-browser/animations';\nimport { NgxMatTypeaheadModule } from 'ngx-mat-typeahead';\nimport { AppComponent } from './app.component';\n\n@NgModule({\n  declarations: [AppComponent],\n  imports: [\n    BrowserModule,\n    BrowserAnimationsModule,\n    FormsModule,\n    ReactiveFormsModule,\n    MatInputModule,\n    MatAutocompleteModule,\n    HttpClientModule,\n    NgxMatTypeaheadModule\n  ],\n  providers: [],\n  bootstrap: [AppComponent]\n})\nexport class AppModule {}\n ```\n\n 2) Use the directive `(NgxMatTypeahead)` in your component.\n\n```typescript\nimport { Component, OnInit } from '@angular/core';\nimport { FormControl, FormGroup } from '@angular/forms';\nimport { AppService } from './app.service';\n@Component({\n  selector: 'mat-ta-root',\n  template: `\u003ch3\u003eNgxMatTypeahead demo app using Angular Material\u003c/h3\u003e\n\u003cdiv [formGroup]=\"testFormGroup\"\u003e\n  \u003cmat-form-field\u003e\n    \u003cinput matInput NgxMatTypeahead [apiURL]=\"url\" [urlQueryParam]=\"queryParam\" (filteredDataList)=\"getFilteredSuggestions($event)\"\n      formControlName=\"country\" [matAutocomplete]=\"countryAuto\" placeholder=\"Choose Country\"\u003e\n    \u003cmat-autocomplete #countryAuto=\"matAutocomplete\"\u003e\n      \u003cmat-option *ngFor=\"let country of countries\" [value]=\"country\"\u003e\n        {{country}}\n      \u003c/mat-option\u003e\n    \u003c/mat-autocomplete\u003e\n  \u003c/mat-form-field\u003e\n\u003c/div\u003e\n`,\n  styleUrls: ['./app.component.css']\n})\nexport class AppComponent implements OnInit {\n  // Paramteres for the input type are defined below. The url is generated using `json-server`.\n  // Please run your own instance of the json-server to use the the below url.\n  queryParam = 'q';\n  url = 'http://localhost:3000/countries';\n\n  constructor(private appService: AppService) {}\n\n  testFormGroup: FormGroup = new FormGroup({ country: new FormControl('') });\n  countries: Array\u003cstring\u003e = [];\n\n  ngOnInit() {\n    this.countries = [\"United States\", \"United Kingdom\", \"China\", \"Japan\", \"India\", \"Russia\", \"Canada\", \"Brazil\"];\n  }\n\n  getFilteredSuggestions(filteredDataLst: Array\u003cany\u003e) {\n    this.countries = [...filteredDataLst];\n  }\n}\n```\n\n## Running the example in local env\n\n* `npm i`\n* 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.\n* The demo app uses `json-server` module for enabling the url and filter funtionality. Make sure you have [json-server](https://www.npmjs.com/package/json-server#getting-started) installed and running.\n* Once you have installed json-server, Run: `json-server --watch db.json`. You can see it running at `http://localhost:3000`.\n\n## Build the NgxMatTypeahead module\n\nRun `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.\n\n## Running unit tests\n\nRun `ng test NgxMatTypeahead` to execute the unit tests via [Karma](https://karma-runner.github.io).\n\n## Credits\n\nThis project is based on [ngx-typeahead](https://github.com/orizens/ngx-typeahead). I want to thank Oren Farhi from [Orizens](http://orizens.com) for open sourcing his project as it helped me to write my first simple Angular library. Also want to thanks entire [Angular](https://angular.io) team for creating this awesome framework.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmrsan22%2Fngxmattypeahead","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fmrsan22%2Fngxmattypeahead","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmrsan22%2Fngxmattypeahead/lists"}