How to use Axios with Angular?

Angular, on the other hand, is a robust framework for building web applications.

If you want to enhance your skills in both areas, this guide is here to help. We'll dive deep into using Axios with Angular to send HTTP requests, handle responses, and create Angular services to handle Axios requests.

Setting up your project

To get started with Angular, you'll need to install Node.js and npm on your computer. Then install the Angular CLI by running the following command in your terminal or command prompt:

sh
Copy
npm install -g @angular/cli

Once the installation is complete, you can create a new Angular project by running the following command:

sh
Copy
ng new my-app

Go ahead and run your application:

sh
Copy
cd my-app
ng serve

This will start a development server and open your Angular app in your default browser.

Installing Axios

To get started with using Axios in your Angular project, you'll first need to install it. First, open up a terminal or command prompt and navigate to your Angular project's root directory.

Type the following command:

sh
Copy
npm install axios

Once you've installed Axios, you'll need to import it into your Angular project. You can do this by adding the import statement to your app.module.ts file.

ts
Copy
import axios from 'axios';

Making HTTP Requests with Axios

Now that you have Axios installed and imported into your Angular project, you can start making HTTP requests. Axios provides a simple and intuitive API for making various HTTP requests, such as GET, POST, PUT, and DELETE requests.

Axios GET requests

Let's see how to make a GET request using Axios to retrieve a random joke from the Jokes API by API Ninjas from Rapid API Hub.

Let’s now make a GET request using Axios in Angular.

Step #1

First we would create an Angular service to make the GET request using Axios:

sh
Copy
ng generate service joke-api

Open the joke-api.service.ts file that was generated in the src/app folder. Import Axios and Injectable from the @angular/core and axios modules:

ts
Copy
import { Injectable } from '@angular/core';
import axios from 'axios';

Step #2

We then add the @Injectable() decorator to the service class:

ts
Copy
@Injectable({
  providedIn: 'root'
})
export class JokeApiService {
  constructor() { }
}

Step #3

Define a method to make the GET request using Axios:

ts
Copy
getRandomJoke() {
  return axios.get('https://jokes-by-api-ninjas.p.rapidapi.com/v1/jokes', {
    headers: {
      'x-rapidapi-host': 'jokes-by-api-ninjas.p.rapidapi.com',
      'x-rapidapi-key': 'your-rapid-api-key'
    }
  });
}

Step #4

Import and use the JokeApiService in your Angular components:

ts
Copy
import { Component } from '@angular/core';
import { JokeApiService } from './joke-api.service';
@Component({
  selector: 'app-root',
  template: `
    <button (click)="getJoke()">Get Joke</button>
    <p>{{ joke }}</p>
  `
})
export class AppComponent {
  joke: string;
  constructor(private jokeApiService: JokeApiService) {}
  getJoke() {
    this.jokeApiService.getRandomJoke()
      .then(response => {
        this.joke = response.data.joke;
      })
      .catch(error => {
        console.log(error);
      });
  }
}

In this example, we're importing the JokeApiService and using it in the AppComponent to retrieve a random joke when clicking the Get Joke button. When the Axios request is successful, we update the joke property of the component with the response data.

Here is the entire code of your joke-api.service.ts:

ts
Copy
import { Injectable } from '@angular/core';
import axios from 'axios';
@Injectable({
  providedIn: 'root'
})
export class JokeApiService {
  constructor() { }
  getRandomJoke() {
    return axios.get('https://jokes-by-api-ninjas.p.rapidapi.com/v1/jokes', {
      headers: {
        'x-rapidapi-host': 'jokes-by-api-ninjas.p.rapidapi.com',
        'x-rapidapi-key': 'your-rapid-api-key'
      }
    });
  }
}

And the following code will be in your app.component.ts file:

ts
Copy
import { Component } from '@angular/core';
import axios from 'axios';
@Component({
  selector: 'app-root',
  template: `
    <h1>Joke Generator</h1>
    <button (click)="getJoke()">Get Joke</button>
  `,
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  private apiUrl = 'https://jokes-by-api-ninjas.p.rapidapi.com/v1/jokes';
  private headers = {
    'x-rapidapi-host': 'jokes-by-api-ninjas.p.rapidapi.com',
    'x-rapidapi-key': 'your-rapid-api-key'
  };
  getJoke() {
    axios.get(this.apiUrl, { headers: this.headers })
      .then(response => {
        console.log(response.data);
      })
      .catch(error => {
        console.error(error);
      });
  }
}

Please make sure you replace 'your-rapid-api-key' with your actual api key.

Once the API call is successful, you will see a joke logged on your console.

A joke logged into the console

Wrap up

Using Axios with Angular can greatly simplify the process of making HTTP requests in your Angular applications. By leveraging the power of Axios, you can easily make requests to APIs and handle the responses in a clean and efficient manner.