Angular HTTP Client and APIs

import { provideHttpClient } from '@angular/common/http';

export const appConfig = {
  providers: [
    provideRouter(routes),
    provideHttpClient()  // Register HttpClient provider
  ]
};

import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { Observable } from 'rxjs';

interface WeatherData {
  name: string;
  main: { temp: number; humidity: number };
  weather: Array<{ description: string }>;
}

@Injectable({ providedIn: &#039;root&#039; })
export class WeatherService {
  private apiKey = &#039;YOUR_API_KEY&#039;;
  private baseUrl = &#039;https://api.openweathermap.org/data/2.5';

  constructor(private http: HttpClient) {}

  getWeather(city: string): Observable<WeatherData> {
    return this.http.get<WeatherData>(
      `${this.baseUrl}/weather?q=${city}&appid=${this.apiKey}&units=metric`
    );
  }
}

import { Component } from '@angular/core';
import { WeatherService } from '../weather.service';

@Component({
  selector: 'app-weather',
  templateUrl: './weather.component.html'
})
export class WeatherComponent {
  city: string = '';
  weather: any = null;
  loading: boolean = false;
  errorMessage: string = '';

  constructor(private weatherService: WeatherService) {}

  search(): void {
    this.loading = true;
    this.weatherService.getWeather(this.city).subscribe({
      next: (data) => {
        this.weather = data;
        this.loading = false;
      },
      error: (err) => {
        this.errorMessage = 'City not found. Try again!';
        this.loading = false;
      }
    });
  }
}

<input [(ngModel)]="city" placeholder="Enter city name" />
<button (click)="search()">Search</button>

<div *ngIf="loading">⏳ Loading...</div>
<div *ngIf="errorMessage">❌ {{ errorMessage }}</div>

<div *ngIf="weather">
  <h2>{{ weather.name }}</h2>
  <p>🌡️ {{ weather.main.temp }}°C</p>
  <p>💧 Humidity: {{ weather.main.humidity }}%</p>
  <p>{{ weather.weather[0].description | titlecase }}</p>
</div>

// CRUD operations in a service
export class ProductService {
  private apiUrl = 'https://api.example.com/products';
  constructor(private http: HttpClient) {}

  // POST - Create
  createProduct(product: any): Observable<any> {
    return this.http.post(this.apiUrl, product);
  }

  // PUT - Update
  updateProduct(id: number, product: any): Observable<any> {
    return this.http.put(`${this.apiUrl}/${id}`, product);
  }

  // DELETE - Remove
  deleteProduct(id: number): Observable<any> {
    return this.http.delete(`${this.apiUrl}/${id}`);
  }
}

import { catchError, throwError } from 'rxjs';

getWeather(city: string): Observable<WeatherData> {
  return this.http.get<WeatherData>(`${this.baseUrl}?q=${city}`)
    .pipe(
      catchError(error => {
        if (error.status === 404) {
          return throwError(() => new Error(&#039;City not found&#039;));
        }
        return throwError(() => new Error(&#039;Server error, please try later&#039;));
      })
    );
}

import { HttpHeaders } from '@angular/common/http';

getProtectedData(): Observable<any> {
  const headers = new HttpHeaders({
    &#039;Authorization&#039;: `Bearer ${localStorage.getItem(&#039;token&#039;)}`,
    &#039;Content-Type&#039;: &#039;application/json&#039;
  });
  return this.http.get(&#039;/api/protected&#039;, { headers });
}