NgxAddressDataGouv

The aim of this project is to provide a web custom elements with an autocomplete input that consume 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 StandaloneModule to use the component inside your angular project.

Installation

`npm install @rebolon/ngx-address-data-gouv-search`

Demo

Usage

Html or any web applications

This is the web-components usage: you only need to require the javascript files from 'node_modules/@rebolon/ngx-address-data-gouv-search/web-components/'' in your html template like this:

          
            <script src="assets/js/polyfills.js" type="module"></script>
            <script src="assets/js/main.js" type="module"></script>
          
        

Angular application

This is the library usage: Import the library from dist in your module or your component like this

          
            import {AddressSearchComponent} from '@rebolon/ngx-address-data-gouv-search/ngx-address-data-gouv-search/';
            ...
            @NgModule OR @Component({
              imports: [
                ...
                AddressSearchComponent,
              ],
            ...
          
        

Usage of the component

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

          
            <ngx-address-data-gouv-search></ngx-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

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

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.

Development server

Run npm start for a dev server. Navigate to http://localhost:4200/. The app will automatically reload if you change any of the source files.

This is the debug mode, a bit like a StoryBook project where the component AddressSearchComponent is built like a full angular component

Build

Run npm run build to build the project as a custom element.

Running unit tests

Run ng test to execute the unit tests via Karma.

Running end-to-end tests

Run ng e2e to execute the end-to-end tests via Protractor.

Further help

You can add issues or do some PR to improve this package !