How to use Axios with Angular?

•

Fri Apr 07 2023

•

4 min read

Axios is a popular JavaScript library that provides an easy way to make HTTP requests and handle responses.

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
npm install -g @angular/cli

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

sh
ng new my-app

Go ahead and run your application:

sh
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
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
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.

Loading component...

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
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
import { Injectable } from '@angular/core';
import axios from 'axios';

Step #2

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

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

Step #3

Define a method to make the GET request using Axios:

ts
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
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
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
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.

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.