Query Parameters

Query parameters are a way to pass additional information to a server through a URL. In Angular, the HTTPClient module provides methods to set and manage query parameters efficiently.

Setting Up HTTPClientModule

First, import the HttpClientModule into your app module:

// app.module.ts
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { HttpClientModule } from '@angular/common/http';
import { AppComponent } from './app.component';
import { DataService } from './data.service';
import { HomeComponent } from './home/home.component';

@NgModule({
  declarations: [AppComponent, HomeComponent],
  imports: [BrowserModule, HttpClientModule],
  providers: [DataService],
  bootstrap: [AppComponent]
})
export class AppModule { }

Creating a Service

Next, create a service to manage HTTP requests using the Angular CLI command:

$ ng generate service data

This command generates a new service file named data.service.ts.

Setting Query Parameters

In the service file, inject the HttpClient and create a method to perform the HTTP request with query parameters:

// data.service.ts
import { Injectable } from '@angular/core';
import { HttpClient, HttpParams } from '@angular/common/http';
import { Observable } from 'rxjs';

@Injectable({
  providedIn: 'root'
})
export class DataService {
  private apiUrl = 'https://jsonplaceholder.typicode.com/posts';

  constructor(private http: HttpClient) { }

  getPosts(userId: number): Observable {
    const params = new HttpParams().set('userId', userId.toString());
    return this.http.get(this.apiUrl, { params });
  }
}

Using the Service in a Component

Inject the service into your component's constructor and use it to perform HTTP requests with query parameters:

// home.component.ts
import { Component, OnInit } from '@angular/core';
import { DataService } from '../data.service';

@Component({
  selector: 'app-home',
  template: `
    
Posts
    

      
{{ post.title }}
    
  `
})
export class HomeComponent implements OnInit {
  posts: any[] = [];

  constructor(private dataService: DataService) {}

  ngOnInit() {
    this.dataService.getPosts(1).subscribe(data => {
      this.posts = data;
    });
  }
}

Handling Errors

To handle errors in your HTTP requests with query parameters, use the catchError operator from RxJS:

// data.service.ts
import { Injectable } from '@angular/core';
import { HttpClient, HttpParams, HttpErrorResponse } from '@angular/common/http';
import { Observable, throwError } from 'rxjs';
import { catchError } from 'rxjs/operators';

@Injectable({
  providedIn: 'root'
})
export class DataService {
  private apiUrl = 'https://jsonplaceholder.typicode.com/posts';

  constructor(private http: HttpClient) { }

  getPosts(userId: number): Observable {
    const params = new HttpParams().set('userId', userId.toString());
    return this.http.get(this.apiUrl, { params }).pipe(
      catchError(this.handleError)
    );
  }

  private handleError(error: HttpErrorResponse) {
    console.error('Server Error:', error);
    return throwError('Something went wrong with the request.');
  }
}

Key Points

Conclusion

Query parameters are essential for passing additional information with HTTP requests. By setting up the HTTPClientModule and using the HTTPClient to set query parameters, you can efficiently manage data communication in your Angular applications. Happy coding!