Skip to content

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

License

Notifications You must be signed in to change notification settings

AndrewJBateman/angular-api-gouvfr

Repository files navigation

⚡ 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

GitHub repo size GitHub pull requests GitHub Repo stars GitHub last commit

📄 Table of contents

📚 General info

📷 Screenshots

Example screenshot

📶 Technologies

💾 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

📁 License

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

✉️ Contact