Angular consuming updated API in 2023.

In this tutorial, we will learn how to consume APIs using Angular framework updated for the year 2023. Consuming APIs is an important aspect of modern web development as it allows us to fetch and display data from external sources, such as databases, servers, or third-party services. Angular provides powerful tools and features that make it easy to communicate with APIs and handle data in our web applications.

Before we start, make sure you have the following tools installed on your system:

1. Node.js and npm: Angular requires Node.js and npm to be installed on your system. You can download and install them from the official Node.js website (https://nodejs.org/).

2. Angular CLI: Angular CLI is a command-line interface for Angular that makes it easy to create, build, and manage Angular applications. You can install Angular CLI globally using npm with the following command:

npm install -g @angular/cli

Once you have installed the necessary tools, we can start creating our Angular application to consume APIs. Follow the steps below to create a new Angular project:

1. Open your terminal or command prompt and run the following command to create a new Angular project:

ng new my-api-consumer

1. Navigate into the newly created project directory:

cd my-api-consumer

1. Next, we need to install the HttpClientModule, which is a module that provides Angular with the necessary tools to make HTTP requests to APIs. Run the following command to install HttpClientModule:

npm install @angular/common/http

1. Import the HttpClientModule module in the AppModule by opening src/app/app.module.ts file and updating it as follows:

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

@NgModule({
  imports: [
    HttpClientModule
  ]
})

1. Now, let’s create a service to handle API requests. Run the following command to generate a new service:

ng generate service api

1. Open the newly generated service file src/app/api.service.ts and import the necessary modules as follows:

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

@Injectable({
  providedIn: 'root'
})

1. Define a constructor and inject the HttpClient module into the service:

constructor(private http: HttpClient) {}

1. Create a method in the service to make a GET request to a sample API. For this tutorial, let’s use the JSONPlaceholder API as an example:

getData(): Observable<any> {
  return this.http.get('https://jsonplaceholder.typicode.com/posts');
}

1. Now, we need to fetch the data from our API service in a component. Let’s generate a new component using the following command:

ng generate component api-consumer

1. Open the newly generated component file src/app/api-consumer/api-consumer.component.ts and import the ApiService:

import { ApiService } from '../api.service';

1. Inject the ApiService into the component:

constructor(private apiService: ApiService) {}

1. Call the getData method from the ApiService in the ngOnInit lifecycle hook:

ngOnInit(): void {
  this.apiService.getData().subscribe((data) => {
    console.log(data);
  });
}

1. Now, we can display the fetched data in the component’s template. Open src/app/api-consumer/api-consumer.component.html and update it with the following code:

<div *ngFor="let item of data">
  <p>{{ item.title }}</p>
</div>

1. Finally, run the Angular development server using the following command:

ng serve

Navigate to http://localhost:4200/ in your web browser to see the API data displayed in the component.

That’s it! You have successfully learned how to consume APIs using Angular in 2023. Remember to replace the sample API with your own endpoint to fetch data specific to your application. Happy coding!