Angular 10 Material CRUD with HttpClient Tutorial Example

Throughout this Angular 10 Material CRUD with HttpClient Tutorial Example, we’ll be learning to implement CRUD operations by example using the latest Angular 10 version that has been released recently.

Angular 10 CRUD Tutorial

In this Angular 10 tutorial, we’ll learn to build an Angular 10 Ajax CRUD example application going through all the required steps from creating/simulating a REST API, scaffolding a new project, setting up the essential APIs, and finally building and deploying your final application to the cloud.

> ✋✋ Join our Facebook group 👈 to discuss anything related to Angular 10 development.

We’ll make use of a CRUD REST API built using json-server which allows you to generate a full working REST API in no time.

What We’ll Learn in this Angular 10 Tutorial?

• We’ll learn by example how to send GET requests with URL query strings and parameters and process HTTP responses from REST API servers in your Angular 10 application using Httplient for fetching and consuming JSON data, how to do error handling for HTTP errors using the RxJS throwError() and catchError() operators, how to retry failed HTTP requests in poor network connections and cancel pending requests using the RxJS retry() and takeUntil() operators, and finally how to deploy the application to Firebase Hosting using the latest Angular 8.3+ features.
• We’ll also see how to use Angular services and RxJS Observables, and learn how to set up Angular Material in our project and style the UI with Material Design components.
• We’ll see how to use the new ng deploy feature in Angular 8.3+ to easily deploy your Angular 10 application from the command-line to Firebase hosting.

What’s CRUD?

CRUD stands for Create, Read. Update and Delete — a set of operations often implemented in web apps to allow users to interact with a database.

In our tutorial, we’ll only focus on building the front-end using Angular 9, the back-end will be mocked using json-server.

We’ll not be learning how to use json-server but you can see the complete instructions from this tutorial after creating the Angular 9 project.

Throughout this step by step Angular 10 tutorial, we are going to see a practical CRUD example of how to use the HttpClient that’s available from the @angular/common/http package, to make HTTP GET requests using the get() method.

What We’ll Cover in this Tutorial?

We’ll cover:

• How to create a fake and complete working CRUD REST API,
• How to install Angular CLI v10,
• How to create an Angular 10 project using Angular CLI,
• How to set up Angular Material and style your application with Material Design,
• How to create Angular components, routing and navigation between them,
• How to create and inject Angular services,
• How to send HTTP GET requests to servers using HttpClient,
• How to use the HttpParams class to add URL query strings in your HttpRequest,
• How to subscribe and unsubscribe from RxJS Observables returned by HttpClient,
• How to handle HTTP errors using the throwError() and catchError() operators,
• How to retry failed HTTP requests using the RxJS retry() operator,
• How to unsubscribe from RxJS Observables returned from HttpClient methods using the takeUntil() operator when requests are canceled,
• How to build your application for production and deploy it to Firebase hosting using the new ng deploy command available from Angular 8.3+

Angular 10 CRUD Tutorial Steps

• Step 1 — Setting up Angular CLI 10
• Step 2 — Initializing a New Angular 10 Example Project
• Step 3 — Setting up a (Fake) JSON REST API
• Step 4 — Setting up Angular HttpClient 10 in our Example Project
• Step 5 — Creating Angular 10 Components
• Step 6 — Adding Angular 10 Routing
• Step 7 — Styling the UI with Angular Material 10
• Step 8 — Consuming the JSON REST API with Angular HttpClient 10
• Step 10 — Adding HTTP Error Handling with RxJS catchError() & HttpClient
• Step 10 — Retrying Failed HTTP Requests with RxJS retry() & HttpClient
• Step 11 — Unsubscribing from HttpClient Observables with RxJS takeUntil()
• Step 12 — Adding URL Query Parameters to the HttpClient get() Method
• Step 13 — Getting the Full HTTP Response with Angular HttpClient 10
• Step 14 — Requesting a Typed HTTP Response with Angular HttpClient 10
• Step 15 — Building and Deploying your Angular 10 Application to Firebase Hosting

This is a screenshot of our application:

Angular 10 CRUD App with Material UI

Read the full tutorial -> https://www.techiediaries.com/angular-10-tutorial-example-rest-crud-http-get-httpclient/