Angular Rest APIs

What is a REST API, and how is it used in Angular?

A REST API (Representational State Transfer Application Programming Interface) is a standardized way of allowing clients (like Angular applications) to interact with a server by using HTTP methods such as GET, POST, PUT, DELETE, etc. Angular applications use REST APIs to retrieve or modify data from a server, typically by making HTTP requests through the HttpClient service.

How do you consume a REST API using Angular's HttpClient?

To consume a REST API in Angular, you use the HttpClient service to make HTTP requests. You can make requests such as GET, POST, PUT, and DELETE to interact with the API. The HttpClient returns an observable, which allows you to subscribe to the response and handle data asynchronously.

Example of consuming a REST API using the HttpClient service:

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

@Injectable({
  providedIn: 'root'
})
export class ApiService {
  private apiUrl = 'https://api.example.com/items';

  constructor(private http: HttpClient) {}

  getItems(): Observable<any> {
    return this.http.get(this.apiUrl);
  }
}

In this example, the getItems() method makes a GET request to retrieve data from the API and returns an observable.

How do you make CRUD operations using a REST API in Angular?

CRUD operations (Create, Read, Update, Delete) can be performed in Angular using the HttpClient service by making the corresponding HTTP requests (POST, GET, PUT, DELETE).

Example of making CRUD operations:

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

@Injectable({
  providedIn: 'root'
})
export class ApiService {
  private apiUrl = 'https://api.example.com/items';

  constructor(private http: HttpClient) {}

  // Read (GET)
  getItems(): Observable<any> {
    return this.http.get(this.apiUrl);
  }

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

  // Update (PUT)
  updateItem(id: string, item: any): Observable<any> {
    return this.http.put(`${this.apiUrl}/${id}`, item);
  }

  // Delete (DELETE)
  deleteItem(id: string): Observable<any> {
    return this.http.delete(`${this.apiUrl}/${id}`);
  }
}

In this example, the ApiService provides methods for making CRUD operations with the REST API:

• GET: Retrieves data (Read).
• POST: Adds new data (Create).
• PUT: Updates existing data (Update).
• DELETE: Deletes data (Delete).

How do you handle query parameters when making a REST API request in Angular?

To send query parameters when making a REST API request, you can use the HttpParams class. HttpParams allows you to construct a set of query parameters and append them to the request URL.

Example of sending query parameters:

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

@Injectable({
  providedIn: 'root'
})
export class ApiService {
  private apiUrl = 'https://api.example.com/items';

  constructor(private http: HttpClient) {}

  getItemsWithParams(page: number, limit: number): Observable<any> {
    const params = new HttpParams()
      .set('page', page.toString())
      .set('limit', limit.toString());

    return this.http.get(this.apiUrl, { params });
  }
}

In this example, query parameters page and limit are passed with the GET request using HttpParams.

How do you handle REST API errors in Angular?

To handle errors when consuming REST APIs in Angular, you can use the catchError operator from RxJS. This operator allows you to catch errors in the observable stream and return an appropriate error message or response.

Example of handling API errors:

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

@Injectable({
  providedIn: 'root'
})
export class ApiService {
  private apiUrl = 'https://api.example.com/items';

  constructor(private http: HttpClient) {}

  getItems(): Observable<any> {
    return this.http.get(this.apiUrl).pipe(
      catchError(error => {
        console.error('Error occurred:', error);
        return throwError('Something went wrong, please try again later.');
      })
    );
  }
}

In this example, the catchError operator is used to catch any errors during the GET request and return a user-friendly error message using the throwError function.

How do you handle authentication for REST APIs in Angular?

To handle authentication with REST APIs, you can include an authorization token (e.g., a JWT) in the HTTP headers of the request. This is typically done using an HTTP interceptor that automatically attaches the token to every outgoing request.

Example of handling authentication:

import { Injectable } from '@angular/core';
import { HttpInterceptor, HttpRequest, HttpHandler, HttpEvent } from '@angular/common/http';
import { Observable } from 'rxjs';

@Injectable()
export class AuthInterceptor implements HttpInterceptor {
  intercept(req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
    const authToken = 'your-auth-token';
    const authReq = req.clone({
      headers: req.headers.set('Authorization', `Bearer ${authToken}`)
    });
    return next.handle(authReq);
  }
}

To register the interceptor, you add it to the providers array in your app module:

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

@NgModule({
  providers: [
    { provide: HTTP_INTERCEPTORS, useClass: AuthInterceptor, multi: true }
  ]
})
export class AppModule { }

In this example, the AuthInterceptor automatically attaches a bearer token to the authorization header of every outgoing HTTP request.

How do you use observables to handle asynchronous data from REST APIs in Angular?

In Angular, the HttpClient service returns observables that allow you to handle asynchronous data from REST APIs. You can subscribe to these observables to receive the response data once the request completes, and optionally chain RxJS operators like map and catchError to transform or handle the data.

Example of handling asynchronous data using observables:

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

@Injectable({
  providedIn: 'root'
})
export class ApiService {
  private apiUrl = 'https://api.example.com/items';

  constructor(private http: HttpClient) {}

  getItems(): Observable<any> {
    return this.http.get(this.apiUrl).pipe(
      map(response => {
        return response['items']; // Transform the response to return only the 'items' property
      })
    );
  }
}

In this example, the getItems() method returns an observable that emits the transformed response, which includes only the items property of the response.

What is the role of HttpParams when working with REST APIs in Angular?

HttpParams is used to append or manipulate query parameters when making requests to REST APIs. It allows you to easily add, remove, or modify query parameters in a clean and structured way.

Example of using HttpParams:

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

@Injectable({
  providedIn: 'root'
})
export class ApiService {
  private apiUrl = 'https://api.example.com/items';

  constructor(private http: HttpClient) {}

  getItemsWithParams(page: number, limit: number): Observable<any> {
    const params = new HttpParams().set('page', page.toString()).set('limit', limit.toString());
    return this.http.get(this.apiUrl, { params });
  }
}

In this example, HttpParams is used to append query parameters page and limit to the GET request.

What is the purpose of an HTTP interceptor when working with REST APIs in Angular?

HTTP interceptors are used to intercept and modify HTTP requests and responses before they are sent or processed. Common use cases include adding authentication tokens, logging requests, or handling error responses globally.

Example of using an HTTP interceptor:

import { Injectable } from '@angular/core';
import { HttpInterceptor, HttpRequest, HttpHandler, HttpEvent } from '@angular/common/http';
import { Observable } from 'rxjs';

@Injectable()
export class LoggingInterceptor implements HttpInterceptor {
  intercept(req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
    console.log('Request made to:', req.url);
    return next.handle(req);
  }
}

In this example, the LoggingInterceptor logs the request URL before forwarding the request to the next handler.

How do you implement pagination when consuming a REST API in Angular?

To implement pagination in Angular, you can use query parameters such as page and limit to control the number of items returned by the API and retrieve different pages of data.

Example of implementing pagination:

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

@Injectable({
  providedIn: 'root'
})
export class ApiService {
  private apiUrl = 'https://api.example.com/items';

  constructor(private http: HttpClient) {}

  getPaginatedItems(page: number, limit: number): Observable<any> {
    const params = new HttpParams().set('page', page.toString()).set('limit', limit.toString());
    return this.http.get(this.apiUrl, { params });
  }
}

In this example, the getPaginatedItems() method sends the page and limit query parameters to the API to retrieve the appropriate page of data.