@rebolon/ng-address-data-gouv NPM

NgAddressDataGouv

The aim of this project is to provide a web custom elements with an autocomplete input that consumes the API of https://adresse.data.gouv.fr/api-doc

With this component you can fill an french address that will be validated against official https://adresse.data.gouv.fr/api-doc

You may also import the library to use the component inside your angular project.

Usage

npm install @rebolon/ng-address-data-gouv

Html or any web applications

You only need to require the javascript files in your html template like this:

<script src="node_modules/ng-address-data-gouv/dist/app/output.js" type="module"></script>

Angular application

Import the library from dist like this

import {AddressSearchComponent, NgAddressDataGouvModule} from '@rebolon/ng-address-data-gouv/dist/lib/';

All application

And then you can use the custom elements everywhere like this:

<ng-address-data-gouv-search></ng-address-data-gouv-search>

Parameters

loaderSize: in px, default is 15
width: of the input field, in px, default is 250
placeholder: of the input, default is empty
label: of the input, default is empty
id: of the input if you need one, default is like this 'ri-address-search-component-' + (new Date()).getTime();
uri: of the API in case you host your own server (cloned from https://github.com/etalab), default is the official uri https://adresse.data.gouv.fr/api-doc

Output

addressFound: the full address retrieved from API with coordinates
isLoading: true/false while the http call is pending

Sample

<ng-address-data-gouv-search(addressFound)="console.log($event)" label="Just fill the input with a french postal address: " width="500"></app-search-address>

Extra infos

In fact you should never keep node_modules in production, but you should move dist files in your app using Webpack, or your Continous Integration with your pipelines.

This project was generated with Angular CLI version 8.0.6.