Throughout this Angular 10/9 tutorial, we’ll learn to build an example web application using APIs like
HttpClient, Angular Router, and Material Design.
We’ll learn to generate components and services using Angular CLI v10 and deploy your final app to the cloud (Firebase).
This is what you’ll learn by following this tutorial:
- You’ll learn to create a fake, but completely working REST API server from a JSON file using json-server.
- You’ll learn to install Angular CLI v10 in your development machine.
- You’ll learn to generate a new Angular 10 project.
- You’ll learn to fetch data from the REST API by sending HTTP requests using
Angular 10 Httplient.
- You’ll learn to handle HTTP errors using various RxJS methods like
- You’ll learn to retry HTTP requests that fail in weak network conditions and cancel pending requests using various RxJS methods such as
- You’ll learn to generate Angular 10 components and services and wire them together to create a working frontend application.
- You’ll learn to add routing to your app to create multiple views and set up Angular Material 10 to design a professional UI.
- You’ll learn to deploy the final application bundles to Firebase hosting using the
These are the steps of this tutorial:
- Step 1 — Setting up Angular CLI 10 in your Development Machine
- Step 2 — Initializing your Angular 10 Project Using Angular CLI v10
- Step 3 — Importing Angular HttpClient in your Angular 10 Project
- Step 4 — Generating your App Components
- Step 5 — Setting up Routing in your Anguar 10 Project
- Step 6 — Styling the UI with Angular 10 Material Components
- Step 7 — Simulating a Fully-Working REST API Using JSON-server
- Step 8 — Sending HTTP Requests with Angular 10 HttpClient
- Step 9 — Handling HTTP Errors in your App
- Step 10 — Implementing Pagination in your App
- Step 11 — Building the Production Bundles and Deploying your Angular 10 App to Firebase
The tutorial is divided into the following parts:
- Setting up Angular 10/9 HttpClient & Creating Components by Example: In the previous steps of our Angular 10 tutorial, we’ve created an example project using Angular CLI. We’ll now see how to import and set up
HttpClientin our project and we’ll also create the components that compose the UI.
- Adding Angular 10/9 Routing and Material Design by Example: In these steps of our Angular 10 tutorial, we’ll continue building our example app by setting up the router and adding routing for the home and about components. Next, we set up Angular Material in our project and use Material components such as
MatProgressSpinnerto style the UI of our app.
- Building and Consuming a REST API with Angular 10/9: Sending GET Requests with HttpClient and Services by Example: In this part of our Angular 10 tutorial, we’ll build a fake REST API backend for our Angular frontend using json-server and faker.js and next, we’ll see how to create a service to send
GETrequests to our backend to fetch and consume data which will be rendered in the home components using the
As always, let’s start with the prerequisites!
What are the Prerequisites?
Before proceeding with this tutorial, you’ll need to make sure you have the following prerequisites:
- Node 8.9+ and NPM 5.5.1+ installed on your system. Node is required by the Angular CLI but not your frontend app since it’s a server-side technology. You can go to the official web site and download the binaries for your target system. You can also use the Node Version Manager for quickly installing and working with multiple Node.js versions in your development machine.
If you have the prerequisites, let’s go ahead and dive into the steps to build an Angular 10 application that fetches data from a REST API server using Angular
HttpClient and display them using Material Design.
Tutorial, Step 1 — Setting up Angular CLI 10 in your Development Machine
In this step, we’ll set up Angular CLI v10 in our development machine.
Angular CLI is built on top of Node.js so as mentioned before, make sure you have it installed on your machine together with
Angular CLI is the official tool for initializing and working with Angular projects.
Open a new command-line interface and run the following command:
$ npm install -g @angular/cli@next
At the time of writing this tutorial, @firstname.lastname@example.org gets installed on our development machine.
If you manage to get this step working, congratulations, you are ready for the next step.
Tutorial, Step 2 — Initializing Your Angular 10 Project Using Angular CLI v10
In this step, we’ll create a new Angular 10 with Angular CLI.
Head back to your command-line interface and run the following commands:
$ cd ~ $ ng new first-angular-app
The CLI will prompt you if you would like to add Angular routing. Say Yes and which stylesheet format you would like to use. Choose CSS.
Angular CLI will set up a fully-working project with the necessary files and dependencies. No need to do complex configurations by yourself! All you need is to focus on your specific project requirements.
Navigate to your project’s folder and serve your app locally using a development server as follows:
$ cd first-angular-app $ ng serve
Your web application will be available from the http://localhost:4200/ address.
Go to web browser and navigate to the
http://localhost:4200/ address to start playing with your web app.
If you are able to get your Angular app running in a web browser without any errors, congratulations! You are ready for the next step.
In these first two steps of our tutorial, we have seen the prerequisites needed for building our example app with Angular 10 such as the knowledge of TypeScript, Node.js and NPM installed on your development machine. Next, we have installed Angular CLI 10 from npm in our machine using the
npm install @angular/cli@next command, initialized a new project and served it locally using a live-reload development server.
In the next step(s), we’ll continue building our example app by setting up