Angular 6+ Dadata suggestion (подсказки) implementation
Demo is here demo
Working code for this demo at stackblitz example
Install via npm package manager
npm install @kolkov/ngx-dadata --save
Import ngx-dadata
module
import { HttpClientModule } from '@angular/common/http';
...
import { NgxDadataModule } from '@kolkov/ngx-dadata';
@NgModule({
imports: [ HttpClientModule, NgxDadataModule ]
})
Then in HTML
<ngx-dadata [config]="config" [(ngModel)]="currentAddress"></ngx-dadata>
or
<ngx-dadata formControlName="currentAddress" [config]="config" (selected)="onAddressSelected($event)"></ngx-dadata>
where
import { DadataConfig } from '@kolkov/ngx-dadata';
...
config: DadataConfig = {
apiKey: 'your_api_key',
type: DadataType.address
};
onAddressSelected(event: DadataSuggestion) {
const addressData = event.data as DadataAddress;
console.log(addressData);
}
For ngModel
to work, you must import FormsModule
from @angular/forms
, or for formControlName
, you must import ReactiveFormsModule
from @angular/forms
also you may add additional options to constraint search (for example cities only):
import { DaDataConfig } from '@kolkov/ngx-dadata';
...
config: DaDataConfig = {
apiKey: 'your_api_key',
type: DaDataType.address,
locations: [
{
region: 'Самарская',
city: 'Тольятти',
}
]
};
Within the download you'll find the following directories and files. You'll see something like this:
dadata/
└── projects/
├── ngx-dadata/
└── ngx-dadata-app/
ngx-dadata/
- library
ngx-dadata-app/
- demo application
The documentation for the ngx-dadata
is hosted at our website ngx-dadata
Please read through our contributing guidelines. Included are directions for opening issues, coding standards, and notes on development.
Editor preferences are available in the editor config for easy use in common text editors. Read more and download plugins at http://editorconfig.org.
For transparency into our release cycle and in striving to maintain backward compatibility, ngx-dadata
is maintained under the Semantic Versioning guidelines.
See the Releases section of our project for changelogs for each release version.
Andrey Kolkov