🚧 Autocomplete localisation partially works

src/app/app.config.ts

@@ -1,8 +1,13 @@
+import { provideHttpClient } from '@angular/common/http';
 import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core';
 import { provideRouter } from '@angular/router';
 
 import { routes } from './app.routes';
 
 export const appConfig: ApplicationConfig = {
-  providers: [provideZoneChangeDetection({ eventCoalescing: true }), provideRouter(routes)]
+  providers: [
+    provideZoneChangeDetection({ eventCoalescing: true }),
+    provideRouter(routes),
+    provideHttpClient(),
+  ],
 };

src/app/components/add-pin-popup/add-pin-popup.component.html

@@ -50,7 +50,7 @@
       </div>
       <!-- Modal body -->
       <div class="p-4 md:p-5">
-        <form class="space-y-4" action="#">
+        <form class="space-y-4" [formGroup]="form">
           <div>
             <label
               for="title"
@@ -114,6 +114,7 @@
               required
             />
           </div>
+
           <div>
             <label
               for="localisation"
@@ -121,14 +122,27 @@
               >Localisation</label
             >
             <input
-              type="localisation"
+              type="text"
-              name="localisation"
               id="localisation"
+              formControlName="location"
               class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-gray-600 dark:border-gray-500 dark:placeholder-gray-400 dark:text-white"
-              placeholder="x"
+              placeholder="Enter location"
-              required
+              (input)="onLocationInput($event)"
             />
+            <ul
+              *ngIf="suggestions.length > 0"
+              class="bg-white border border-gray-300 mt-2 rounded shadow"
+            >
+              <li
+                *ngFor="let suggestion of suggestions"
+                (click)="selectSuggestion(suggestion)"
+                class="p-2 hover:bg-gray-100 cursor-pointer"
+              >
+                {{ suggestion.display_name }}
+              </li>
+            </ul>
           </div>
+
           <div class="flex justify-between">
             <button
               type="submit"

src/app/components/add-pin-popup/add-pin-popup.component.ts

@@ -1,9 +1,59 @@
-import { MatGoogleMapsAutocompleteModule } from '@angular-material-extensions/google-maps-autocomplete';
+import { CommonModule } from '@angular/common';
 import { Component } from '@angular/core';
+import {
+  FormBuilder,
+  FormControl,
+  FormGroup,
+  ReactiveFormsModule,
+} from '@angular/forms';
+import { AutocompleteService } from '../../services/auto-complete.service';
 
 @Component({
   selector: 'app-add-pin-popup',
-  imports: [MatGoogleMapsAutocompleteModule],
+  standalone: true,
+  imports: [ReactiveFormsModule, CommonModule],
   templateUrl: './add-pin-popup.component.html',
 })
-export class AddPinPopupComponent {}
+export class AddPinPopupComponent {
+  form: FormGroup;
+  suggestions: any[] = [];
+
+  constructor(
+    private fb: FormBuilder,
+    private autocompleteService: AutocompleteService
+  ) {
+    // Define the form structure
+    this.form = this.fb.group({
+      title: [''],
+      description: [''],
+      location: new FormControl(''), // Ensure it's explicitly a FormControl
+    });
+  }
+
+  // Handles location input
+  onLocationInput(event: any): void {
+    const query = event.target.value.trim();
+    if (query.length > 2) {
+      this.autocompleteService.getAddressSuggestions(query).subscribe({
+        next: (data) => {
+          this.suggestions = data;
+        },
+        error: (err) => {
+          console.error('Error fetching suggestions:', err);
+          this.suggestions = [];
+        },
+      });
+    } else {
+      this.suggestions = [];
+    }
+  }
+
+  // Handles suggestion selection
+  selectSuggestion(suggestion: any): void {
+    const locationControl = this.form.get('location');
+    if (locationControl instanceof FormControl) {
+      locationControl.setValue(suggestion.display_name);
+    }
+    this.suggestions = [];
+  }
+}

src/app/services/auto-complete.service.spec.ts

@@ -0,0 +1,16 @@
+import { TestBed } from '@angular/core/testing';
+
+import { AutoCompleteService } from './auto-complete.service';
+
+describe('AutoCompleteService', () => {
+  let service: AutoCompleteService;
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({});
+    service = TestBed.inject(AutoCompleteService);
+  });
+
+  it('should be created', () => {
+    expect(service).toBeTruthy();
+  });
+});

src/app/services/auto-complete.service.ts

@@ -0,0 +1,23 @@
+import { HttpClient } from '@angular/common/http';
+import { Injectable } from '@angular/core';
+import { Observable } from 'rxjs';
+
+@Injectable({
+  providedIn: 'root',
+})
+export class AutocompleteService {
+  private apiUrl = 'https://nominatim.openstreetmap.org/search';
+
+  constructor(private http: HttpClient) {}
+
+  getAddressSuggestions(query: string): Observable<any> {
+    return this.http.get(this.apiUrl, {
+      params: {
+        q: query,
+        format: 'json',
+        addressdetails: '1',
+        limit: '5',
+      },
+    });
+  }
+}