Phase C: Create World Bank API service with HttpClient

src/app/app.config.ts

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

src/app/map/map.ts

@@ -1,11 +1,34 @@
 import { Component } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { WorldBankService, CountryData } from '../services/world-bank';
 
 @Component({
   selector: 'app-map',
-  imports: [],
+  imports: [CommonModule],
   templateUrl: './map.html',
-  styleUrl: './map.css',
+  styleUrl: './map.css'
 })
-export class Map {
+export class MapComponent {
+  countryData: CountryData | null = null;
+  loading: boolean = false;
+  error: string | null = null;
 
+  constructor(private worldBankService: WorldBankService) {}
+
+  onCountrySelected(countryCode: string): void {
+    this.loading = true;
+    this.error = null;
+    
+    this.worldBankService.getCountryData(countryCode).subscribe({
+      next: (data) => {
+        this.countryData = data;
+        this.loading = false;
+      },
+      error: (err) => {
+        this.error = 'Failed to load country data';
+        this.loading = false;
+        console.error('API Error:', err);
+      }
+    });
+  }
 }

src/app/services/world-bank.ts

@@ -0,0 +1,40 @@
+import { Injectable } from '@angular/core';
+import { HttpClient } from '@angular/common/http';
+import { Observable } from 'rxjs';
+import { map } from 'rxjs/operators';
+
+export interface CountryData {
+  name: string;
+  capital: string;
+  region: string;
+  incomeLevel: string;
+  longitude: string;
+  latitude: string;
+}
+
+@Injectable({
+  providedIn: 'root'
+})
+export class WorldBankService {
+  private apiUrl = 'https://api.worldbank.org/v2/country';
+
+  constructor(private http: HttpClient) { }
+
+  getCountryData(countryCode: string): Observable<CountryData> {
+    const url = `${this.apiUrl}/${countryCode}?format=json`;
+    
+    return this.http.get<any>(url).pipe(
+      map(response => {
+        const country = response[1][0];
+        return {
+          name: country.name || 'N/A',
+          capital: country.capitalCity || 'N/A',
+          region: country.region?.value || 'N/A',
+          incomeLevel: country.incomeLevel?.value || 'N/A',
+          longitude: country.longitude || 'N/A',
+          latitude: country.latitude || 'N/A'
+        };
+      })
+    );
+  }
+}