The Angular echo system has been undergoing some changes over the past year. One of those changes was the introduction of the concept of Standalone applications, which was introduced in Angular v14. The Standalone applications provide the option of creating projects without modules. We can call such applications module-less applications, which allows the possibility of only importing the packages needed for building an application.
To fetch data in a Standalone application, Angular introduced the concept of using the provideHttpClient
. In a module-based application the HttpClientModule
remains the way to go. In the next few steps, I will break down how we can use the provideHttpClient
to fetch data from a public REST API.
Prerequisites
This tutorial requires you to be familiar with the basics of the technologies listed below:
- Html
- JavaScript
- TypeScript
- node package manager (npm)
Table of Contents
- How to Install and Create a Standalone app in Angular 16
- Generating the Angular service
- How to Configure the provideHttpClient
- Integrating the JSON Placeholder REST API
- Displaying the Data in an HTML Table
- Conclusion
You can also watch the video version of this article on my YouTube channel:
How to Install and Create a Standalone App in Angular 16
To create a new Angular project, we need to ensure we have Angular installed in the terminal. To do that, we have to open the terminal and run the command ng version
. If you get an error message, that means Angular has not been installed on your machine and you'll have to run the following command below to have it installed:
npm install -g @angular/cli
Once the installation is complete, you can close and reopen the terminal, and then re-run the ng version
command. That should give us the result below in the terminal:
From the image above, we can see the version of the Angular version installed, which is Angular 16 as of the time of writing of this article.
Next, we can proceed to create a new standalone application in our terminal by running the following command:
ng new ng-client --routing=false --style=css --standalone
The command above will generate a new standalone application called ng-client. The application will be without a routing configuration as we set it to false, and a style sheet of CSS. To run this application, we can navigate to the ng-client directory and run the ng serve --open
command. This should open up the default Angular template user interface as seen below.
Generating the Angular service
Services in Angular are TypeScript classes that help to perform specific functions in an Angular application. In this application, we will be making use of the Angular Service to fetch data from a REST API. To do this, the first thing we need to do is to generate an Angular Service, with the following command:
ng g service service/data
With the above, a new Service called DataService
is created inside a service folder.
How to Configure the provideHttpClient
To configure the Angular Service, we head to the main.ts
file. Here we can have the following code below:
import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app/app.component';
import { provideHttpClient } from '@angular/common/http';
bootstrapApplication(AppComponent, {
providers: [provideHttpClient()],
}).catch((err) => console.error(err));
To summarize the above code, we
- Start by importing the
provideHttpClient
from the@angular/common/http
package. - Next, we inject the
provideHttpClient()
within theproviders
array.
This configuration now makes it possible to make use of the HttpClient
to communicate with the REST API in our DataService
file.
Integrating the JSON Placeholder REST API
The public REST API we will use in this tutorial is called the JSON Placeholder. To integrate this API, we need to import a couple of packages in our DataService
file:
import { HttpClient } from '@angular/common/http';
import { Observable } from 'rxjs';
Next, we create the interface that helps to shape the way the object from our data is going take, as seen below:
interface Post {
userId: number;
id: number;
title: string;
body: string;
}
The user id
, id
, title
, and body
are all data we intend to display in the table. We can now create the variable that holds the link of our REST API as well as inject the HttpClient
in the constructor.
apiUrl = 'https://jsonplaceholder.typicode.com/posts';
constructor(private http: HttpClient) {}
Finally, we create the function that communicates with the REST API as seen below:
getAllPosts(): Observable<Post[]> {
return this.http.get<Post[]>(this.apiUrl);
}
- The
getAllPosts()
is appended to anObservable
of typePost
. - In the
return
statement, we make use of theget
http request to retrieve data from the API.
Our DataService
file should now look like this:
import { HttpClient } from '@angular/common/http';
import { Observable } from 'rxjs';
import { Injectable } from '@angular/core';
interface Post {
userId: number;
id: number;
title: string;
body: string;
}
@Injectable({
providedIn: 'root',
})
export class DataService {
apiUrl = 'https://jsonplaceholder.typicode.com/posts';
constructor(private http: HttpClient) {}
getAllPosts(): Observable<Post[]> {
return this.http.get<Post[]>(this.apiUrl);
}
}
With this configuration, we can now communicate with the service directly from our component file by making use of dependency injection.
Displaying the Data in an HTML Table
To display the data on a table, we head to our app.component.ts
file. Here we implement the following code below:
- We begin by importing the
DataService
in line 3, and then injecting it in the constructor in line 24. - Next, we created the interface called
Post
between line 5 and line 11. - In line 21 and line 22, we created two variables. The first variable called
posts
, which is assigned a type ofPost
, has an initial value of an empty array([]
). This variable will hold the data fetched from the REST API. The second variable callederrorMessage
will hold our error message, if any exists. - Finally, within our
ngOnInit
lifecycle hook we implement the logic to consume the data from ourDataService
. In line 27, we called thegetAllPosts()
function from our DataService. We then subscribed to thegetAllPosts()
function, returning twoObservers
from the subscription. The firstObserver
is callednext
in line 28. Here we called theposts
variable we created earlier in line 21, and attached the data from the next argument to it, which is also called posts. Next, in line 32, we created the errorObserver
and then attached any possible error that may occur to theerrorMessage
variable.
With this implementation, if we save all the files and then run the ng serve --open
command, a new tab will open in the browser. In our app.component.ts
file, we have a console.log
method in line 30, which allows us to view the data when we open the console as seen in the image below:
To display the data in the console inside of a table, we head to the app.component.html
, clear the boilerplate code and then paste the code below:
<table>
<tr>
<th>id</th>
<th>title</th>
<th>body</th>
</tr>
<tr *ngFor="let post of posts">
<td>{{post.id}}</td>
<td>{{post.title}}</td>
<td>{{post.body}}</td>
</tr>
<tr>
</table>
Above, we made use of the *ngFor
directive within the tr
tag to loop through the data. We then made use of interpolation({{}}
) to display data for the id
, title
, and the body
.
If we save, we can now have the results below in the browser:
Conclusion
In this tutorial, you have learned how to fetch data for standalone applications by making use of the provideHttpClient
in Angular. If you want access to the code base, you can either fork or clone the repo here on Github.
If you find this article helpful, you can kindly show your support by subscribing to my YouTube channel where I create awesome tutorials on web development technologies like JavaScript, React, Angular, Node.js, WordPress, and more.
Top comments (0)