Angular HTTP Communication Interview Questions

Frontend or Client Side Applications often require to send or receive data from a remote server. A good understanding of this process of interacting with web APIs is vital as a Frontend Developer. Here is a detailed overview of important questions regarding HTTP communication in Angular, along with explanations.

This collection contains some potential interview questions that may be helpful if you are preparing for a Frontend Engineering job interview specific to Angular framework. Check out Angular Interview Series – Topic Wise Q&A.

1. What is HttpClient in Angular?

HttpClient is a Service that comes with the Angular framework and enables us to make HTTP requests to communicate with remote servers. It is part of the @angular/common/http package and provides a simpler API compared to the older Http module (that was deprecated in Angular 5).

2. How do you use HTTP Client in Angular?

To use HTTP Client we need to import HttpClientModule In our application module (usually app.module.ts).

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

@NgModule({
  declarations: [/* your components */],
  imports: [
    HttpClientModule,
    // other modules
  ],
  providers: [],
  bootstrap: [/* your main component */]
})
export class AppModule {}

3. How do you perform a GET request using HttpClient?

To perform a GET request, we can inject HttpClient into a service or component and use the get method. For example:

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/data';

  constructor(private httpClient: HttpClient) {}

  getData(): Observable<any> {
    return this.httpClient.get('https://api.example.com/data')
  .subscribe(response => {
    console.log(response);
  });

  }
}

4. How do you handle errors when consuming APIs?

We can use the catchError operator of RxJS to handle errors while making an API call.

import { catchError } from 'rxjs/operators';
import { throwError } from 'rxjs';

this.httpClient.get('https://api.example.com/data')
  .pipe(
    catchError(error => {
      console.error('Error occurred:', error);
      return throwError(error);
    })
  )
  .subscribe(response => {
    console.log(response);
  });

Note: throwError is a RxJS function that creates an observable with an error instance and push it to the consumer.

5. How do you make a POST request using HttpClient?

We can make a POST request by using the post method of HttpClient and pass the client data (or payload) as the second argument. For example:

const data = { name: 'John Doe', age: 30 };
this.httpClient.post('https://api.example.com/users', data)
  .subscribe(response => {
    console.log(response);
  });

6. What are HttpHeaders? How can you use it in Angular?

HTTP headers are key-value pairs that are sent along with HTTP requests and responses to provide information about how information is exchanged between a web browser and a web server.

HttpHeaders in Angular is a class that represents the header configuration options for an HTTP request. We can create an instance of this class and pass it as an option in HTTP requests. This should be an object of supported HTTP Header Fields like content type, authentication tokens etc.

const headers = new HttpHeaders({
  'Content-Type': 'application/json',
  'Authorization': 'Bearer your-token',
});

this.http.get<any>(this.apiUrl, { headers }).subscribe(response => {
  // Handle the response
});

Reference: List of HTTP Header Fields on Wikipedia

7. What are Interceptors in Angular?

Interceptors are services that allow you to modify HTTP requests or responses globally before they are sent or after they are received. They are useful for adding headers, logging, or handling errors consistently across the application.

8. How can you can create and use an Interceptor in Angular?

To set up an Interceptor, we need to create a class that implements HttpInterceptor and override the intercept function. Once the interceptor is created we can provide it in our module.

Example of an Interceptor

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 cloned = req.clone({
      setHeaders: {
        Authorization: `Bearer your-token`
      }
    });
    return next.handle(cloned);
  }
}

// In the module
providers: [
  { provide: HTTP_INTERCEPTORS, useClass: AuthInterceptor, multi: true }
]

9. What is CORS?

Web browsers follow the same-origin policy So, all browsers simply restrict script-based network calls to their own domain (or sub domain) only. Requests to an entirely different domain will fail.

CORS (Cross-Origin Resource Sharing) is a security feature in browsers that allows web applications to access resources from other domains when each side (client and server) agrees on same resource sharing policy. It’s an important part of modern web development for maintaining security.

10. How can you handle CORS issues in Angular?

If we face CORS issues then we can check:

1. If the API server includes the appropriate headers, like Access-Control-Allow-Origin.
2. If we control the API, we can configure the server to accept requests from our Angular app’s domain.
3. We can also use a proxy during development by configuring proxy.conf.json.

11. What is the difference between subscribe and async pipe?

subscribe is a method of RxJS Observables required to subscribe to an Observable programmatically to handle responses.

this.apiService.getData().subscribe(data => {
  this.data = data;
});

While an async pipe automatically subscribes to an Observable in the template, managing subscriptions for us.

<div *ngIf="apiService.getData() | async as data">
  {{ data | json }}
</div>

12. Explain the difference between subscribe() and toPromise().

subscribe() is used to handle observable streams, allowing you to react to emitted values and errors. toPromise() converts an observable into a promise, making it suitable for use in async/await syntax. However, Angular recommends using observables for handling HTTP responses.

13. What is the purpose of the withCredentials option in HttpClient?

The withCredentials option allows you to include credentials (like cookies or HTTP authentication) with your requests to cross-origin resources. It must be set to true for requests that need credentials when interacting with different domains.

14. How can you handle JSON data in HttpClient?

By default, HttpClient automatically converts JSON responses into JavaScript objects. We can specify the expected response type if needed. For example:

this.httpClient.get<MyResponseType>('https://api.example.com/data')
  .subscribe(response => {
    console.log(response);
  });

API consumption in Angular is essential for building dynamic web applications. Understanding how to use HttpClient, handle errors, manage requests with interceptors, and ensure smooth data flow with observables will significantly enhance your ability to work with Angular.