# ngx-dawa-autocomplete

> ## About

Latest version **2.1.1** (published 2019-05-29) · MIT license · 0 weekly downloads

> **Deprecated.** This package is deprecated.

## Install

```sh
npm install ngx-dawa-autocomplete
pnpm add ngx-dawa-autocomplete
yarn add ngx-dawa-autocomplete
bun add ngx-dawa-autocomplete
```

## Health

**Score 10/100 (F)** — status: deprecated.

Negative: deprecated.

## Facts

| | |
|---|---|
| Version | 2.1.1 |
| Published | 2019-05-29 |
| First published | 2017-05-31 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 1 |
| Unpacked size | 150.2 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | dinero |
| Maintainers | eikc, larsnikolajsen, mikkeldamm |
| Keywords | angular, autocomplete, dawa, dawa-autocomplete |

## Links

- npm: https://www.npmjs.com/package/ngx-dawa-autocomplete
- Repository: https://github.com/DineroRegnskab/ngx-dawa-autocomplete
- Homepage: https://github.com/DineroRegnskab/ngx-dawa-autocomplete#readme
- Issues: https://github.com/DineroRegnskab/ngx-dawa-autocomplete/issues
- npm.io page: https://npm.io/package/ngx-dawa-autocomplete

## Dependencies (1)

- [tslib](https://npm.io/package/tslib.md) ^1.9.0

## Recent versions

- 2.1.1 (latest) — 2019-05-29
- 2.1.0 — 2019-05-29
- 2.0.2 — 2018-08-15
- 2.0.1 — 2018-03-28
- 2.0.0 — 2018-03-28
- 1.0.1 — 2017-05-31
- 1.0.0 — 2017-05-31

## README

# ngx-dawa-autocomplete

## About

DawaAutocomplete is a module consisting of a directive that provides an typeahead/autocomplete solution for the [Danish Address Web Api](https://dawa.aws.dk/). It uses the autocomplete api that has been provided by DAWA.

## Installation

To install this library, run:

```bash
$ npm install ngx-dawa-autocomplete --save
```

## Example

[Here is a Plunker example](http://embed.plnkr.co/JRgHXteqVxOSo2TKsyXD/)

## Usage

Like described above, the ngx-dawa-autocomplete is a module with a directive, that you can apply to any input/textarea element in your Angular application. Its built in a way so you have full control over the layout and structure of the autocomplete container, therefor its not a component.

**First include the DawaAutocompleteModule in your module (main or sub)**
```typescript
import { NgModule } from '@angular/core';

import { DawaAutocompleteModule } from 'ngx-dawa-autocomplete';
 
import { AppComponent }  from './app.component';
 
@NgModule({
  imports: [
    BrowserModule,
    DawaAutocompleteModule.forRoot()
  ],
  declarations: [
    AppComponent
  ],
  bootstrap: [
    AppComponent
  ]
})
export class AppModule { }
```

**then you apply the `ngxDawaAutocomplete` directive to the specified input element, and the rest of the html is what ever you decide.**
```typescript
import { Component } from '@angular/core';
import { DawaAutocompleteItem } from 'ngx-dawa-autocomplete';

@Component({
    selector: 'app',
    template: `
        <div class="autocomplete-container">
            <input
                type="text"
                [value]="selectedStreet"
                ngxDawaAutocomplete
                (items$)="onItems($event)"
                (highlighted$)="onItemHighlighted($event)"
                (select$)="onItemSelected($event)" />
            <ul class="autocomplete-items" *ngIf="items.length > 0">
                <li class="autocomplete-item"
                    *ngFor="let item of items; let i = index;"
                    [class.highlighted]="i === highlightedIndex"
                    (click)="onItemSelected(item)">
                    {{item.text}}
                </li>
            </ul>
        </div>
    `
})
export class AppComponent {

    public items: DawaAutocompleteItem[] = [];
    public highlightedIndex: number = 0;
    public selectedItem: DawaAutocompleteItem;

    public onItems(items) {
        this.items = items;
    }

    public onItemHighlighted(index) {
        this.highlightedIndex = index;
    }

    public onItemSelected(item) {
        this.items = [];
        this.highlightedIndex = 0;
        this.selectedItem = item;
    }
}
```

## API

Right now there is no way to specify information to the directive, there is only 3 outputs that you can listen on:

**DawaAutocompleteDirective**  

| Outputs          | type                    | description      |
| ---------------- | ----------------------- | ---------------- |
| **items$**       | DawaAutocompleteItem[]  | Emitted each time theres a new search result, when you focus/click in the field and click outside the autocomplete container |
| **highlighted$** | number                  | Emitted when `arrow up/down` are pressed to identify highlighted index |
| **select$**      | DawaAutocompleteItem    | Emitted when `enter` or `tab` is pressed |

**DawaAutocompleteItem interface**  

| Name          | type   |
| ------------- | ------ |
| text          | string |
| door          | string |
| floor         | string |
| number        | string |
| zip           | string |
| city          | string |
| street        | string |
| fullStreet    | string |

## License

MIT © [dineroregnskab](mailto:developer@dinero.dk)

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