# @avas/ngx-autocomplete

> Autocomplete component for Angular6+

Latest version **2.0.0** (published 2019-03-13) · MIT license · 0 weekly downloads

## Install

```sh
npm install @avas/ngx-autocomplete
pnpm add @avas/ngx-autocomplete
yarn add @avas/ngx-autocomplete
bun add @avas/ngx-autocomplete
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 2.0.0 |
| Published | 2019-03-13 |
| First published | 2018-02-13 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 0 |
| Unpacked size | 39.5 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 0 |
| Author | Arpad Vas |
| Maintainers | avas |
| Keywords | angular, javascript, typescript, typeahead, autocomplete, ui component |

## Links

- npm: https://www.npmjs.com/package/@avas/ngx-autocomplete
- Repository: https://github.com/arpadvas/ngx-autocomplete
- Issues: https://github.com/arpadvas/ngx-autocomplete/issues
- npm.io page: https://npm.io/package/@avas/ngx-autocomplete

## Alternatives

- [@openai/codex-sdk](https://npm.io/package/@openai/codex-sdk.md) — 731.4K weekly downloads
- [babel-plugin-transform-react-jsx](https://npm.io/package/babel-plugin-transform-react-jsx.md) — 565.0K weekly downloads
- [babel-helper-remove-or-void](https://npm.io/package/babel-helper-remove-or-void.md) — 508.5K weekly downloads
- [@pnpm/store-controller-types](https://npm.io/package/@pnpm/store-controller-types.md) — 186.9K weekly downloads
- [react-native-signature-canvas](https://npm.io/package/react-native-signature-canvas.md) — 155.6K weekly downloads

## Recent versions

- 2.0.0 (latest) — 2019-03-13
- 1.0.0 — 2018-02-26
- 0.1.4 — 2018-02-23
- 0.1.3 — 2018-02-23
- 0.1.2 — 2018-02-23
- 0.1.1 — 2018-02-23
- 0.1.0 — 2018-02-23
- 0.0.2 — 2018-02-13
- 0.0.1 — 2018-02-13

## README

# @avas/NgxAutocomplete

Autocomplete component for Angular6+

## Feautures

Works only with HTTPClient.

Works only with reactive forms.

Static array and API call support.

Highlight matches (case insensitive).

Keyboard support.

AOT compatible.

## Installation
```
npm install @avas/ngx-autocomplete --save
```

## Inputs

* **type**<_string_> - The input field type (text by default).
* **placeholder**<_string_> - The input field placeholder.
* **apiString**<_string_> - API URL to be called.
* **paramName**<_string_> - The keyword string will be attached as query string parameter with the given name. For example "https://yourURL?paramName=keyword"
* **suggestionPropName**<_string_> - By default the response coming from the API is handled as an array of string. If suggestionPropName is provided then response will be handled as an array of objects and the given property will be mapped on the suggestion list.
* **payloadPropName**<_string_> - The property name of the response payload. If not provided then the response will be handled as the payload itself.
* **staticDataSource**<_any[]_> - Array of string or objects. If second then suggestionPropName must be provided.
* **control**<FormControl> - The ngx-autocomplete selector must be part of a reactive form.

## Outputs

* **selected**<_string_> - Emits an event once the item is selected.

## Usage

First import NgxAutocompleteModule to your module:

```typescript
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';
import { NgxAutocompleteModule } from './ngx-autocomplete/ngx-autocomplete.module';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
import { HttpClientModule } from '@angular/common/http';


@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    HttpClientModule,
    FormsModule,
    ReactiveFormsModule,
    NgxAutocompleteModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }
```

Then create a reactive form:

```typescript
import { Component } from '@angular/core';
import { FormGroup, FormBuilder } from '@angular/forms';

export class AppComponent {

  myForm: FormGroup;
  weekdays: any[] = [
    {
      name: 'Monday'
    },
    {
      name: 'Tuesday'
    },
    {
      name: 'wednesday'
    }
  ];

  constructor(
    private formBuilder: FormBuilder
  ) {
    this.createForm();
  }

  createForm() {
    this.myForm = this.formBuilder.group({
      keyword: ''
       });
  }

}
```

Add seletor with static array source:

```html
<form [formGroup]="myForm">
  <ngx-autocomplete formControlName="keyword"
                    [control]="myForm.controls.keyword"
                    [staticDataSource]="weekdays"
                    suggestionPropName="name"
                    (selected)="onSelected($event)"></ngx-autocomplete>
</form>
```

Add seletor with API call:

```html

<form [formGroup]="myForm">
  <ngx-autocomplete formControlName="keyword"
                    [control]="myForm.controls.keyword"
                    apiString="http://localhost:3000/api/ascent/queryascents"
                    paramName="keyword"
                    payloadPropName="payload"
                    suggestionPropName="name"
                    (selected)="onSelected($event)"></ngx-autocomplete>
</form>
```

## Override built-in styles

Use ::ng-deep selector to override built-in element or class styles. For example:

```css
ngx-autocomplete ::ng-deep input {
     /* your style comes here */
}
```
```css
ngx-autocomplete ::ng-deep .highlighted {
    /* your style comes here */
}
```

---
_Source: https://npm.io/package/@avas/ngx-autocomplete · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._