andrewjbateman / angular-api-gouvfr

:clipboard: Angular app to search for address data from the French Government official API

⚡ Angular API Gouv.fr

• Angular app using an ngForm and RxJS operators and the French Gouvernment API to search for addresses in France
• Note: to open web links in a new window use: ctrl+click on link

📄 Table of contents

• ⚡ Angular API Gouv.fr
  • 📄 Table of contents
  • 📚 General info
  • 📷 Screenshots
  • 📶 Technologies
  • 💾 Setup
  • 🔦 Testing
  • 💻 Code Examples
  • 🆒 Features
  • 📋 Status & To-Do List
  • 👏 Inspiration
  • 📁 License
  • ✉️ Contact

📚 General info

• API address search uses the geocoders geocodespec standard geojson response format (6 years ago)
• RxJS subscriptions objects used to represents the execution of observables.

📷 Screenshots

📶 Technologies

• Angular v17
• Angular Material v17
• Angular Formcontrol used to track the value and validation status of an individual form control
• Angular Material Autocomplete v17
• SCSS extended CSS syntax using SASS pre-compiler
• RxJS Library v7 used to handle async operations using observables.
• RxJS debounce time added to user search to emit a value with a delay after user has stopped typing

💾 Setup

• Install dependencies by running npm i
• Run ng serve for a dev server. Navigate to http://localhost:4200/.
• The app will automatically reload if you change any of the source files

🔦 Testing

• n/a

💻 Code Examples

• extract from app.component.html client form input field with autocomplete

<form class="search-form-input">
  <mat-form-field class="search-full-width" appearance="fill">
    <input
      class="search-input"
      type="text"
      placeholder="Enter query"
      aria-label="query input field"
      matInput
      [formControl]="formControl"
      [matAutocomplete]="auto"
    />

    <!--autocomplete address using displayFctn to list options-->
    <mat-autocomplete #auto="matAutocomplete" [displayWith]="displayFctn">
      <mat-option *ngIf="isLoading" class="is-loading">
        <mat-progress-bar mode="query"></mat-progress-bar>
      </mat-option>
      <ng-container *ngIf="!isLoading">
        <mat-option *ngFor="let option of options" [value]="option">
          {{ displayFctn(option) }}
        </mat-option>
      </ng-container>
    </mat-autocomplete>
  </mat-form-field>
  </form>

🆒 Features

• auto address complete
• No API key required
• Material module created and passed to modules that need it via the Shared module. The need for shared modules is debated and is set up here for the app to grow in size.

📋 Status & To-Do List

• Status: Simple Working address search. Only works with Ivy compiler disabled.
• To-Do: Nothing

👏 Inspiration

• geo.api.gouv.fr homepage "Interrogez les référentiels géographiques plus facilement."
• Geocoders: geocodejson-spec: Github repo DRAFT: attempt to have standard geojson responses from geocoders.

📁 License

• This project is licensed under the terms of the MIT license.

✉️ Contact

• Repo created by ABateman, email: [email protected]