While sending requests to our web API server, we can get an error in response. Therefore, using Angular Error Handling to handle those errors while sending HTTP requests is a must. That’s exactly what we are going to do in this post. If we get the 404 or the 500 error, we are going to redirect the user to a specific page. For other errors, we are going to show an error message in a modal form. The page that handles the 404 error is already created, so, let’s continue on by creating a 500 (Internal server error) component.

If you want to see all the basic instructions and complete navigation for the .NET Core series, check out the following link: Introduction of the .NET Core series.

For the complete navigation and all the basic instructions of the Angular series, check out: Introduction of the Angular series.

The source code is available at GitHub .NET Core, Angular, and MySQL. Part 11 – Source Code

This post is divided into several sections:

Creating the 500 (Internal Server Error) Component

In the error-pages folder, we are going to create a new component by typing the AngularCLI command:

Let’s modify the internal-server.component.ts:

Then, let’s modify the internal-server.component.html:

Additionally, we are going to modify the internal-server.component.css as well:

Finally, let’s modify the app.module.ts:

That’s it.

We have created our component and it is time to create a service for error handling.

Creating a Service for Angular Error Handling

In the folder shared/services create a new service and name it error-handler.service.ts:

ng g service shared/services/error-handler --skipTests

Let’s modify that error-handler.service.ts file:

First of all, we are injecting the Router which we use for redirecting the user to other pages in the code. In the method handleError(), we are checking for the error’s status code, and based on that we are calling the right private method for handling that error. The handle404Error() and handle500Error() functions are responsible for populating the errorMessage property. We are going to use this property as a modal error message or an error page message. We are going to deal with the handleOtherError() function later, thus the comment inside.

If you remember in the owner-list.component.ts file, we are fetching all the owners from the server. But there is no error handling in that file. So let’s continue with modifying that owner-list.component.ts file to implement the Angular error handling functionality:

That’s it.

You can try it out by changing the code in the server’s method GetAllOwners. As the first line of code add return NotFound() or return StatusCode(500, “Some message”), and you are going to be redirected to the right error page for sure.

Preparation for the Owner-Details Component

Let’s continue by creating the owner-details component:

ng g component owner/owner-details --skipTests

owner-details structure in Angular Error Handling

We need to modify the owner.module.ts file:

As you can see, the new path has the parameter id. So when we click on the Details button we are going to pass this Id to our route and we are going to fetch the owner with that exact id in the OwnerDetails component.

We need to add a new interface to the _interfaces folder:

And modify the Owner interface:

By using a question mark, we are making our property as optional.

To continue, let’s change the owner-list.component.html:

On a click event, we are calling the getOwnerDetails function and passing the owner’s id as a parameter. So we need to handle that click event in our owner-list.component.ts file.

Add an import statement:

Then modify constructor and add the function getOwnerDetails(id):

Implementation of the Owner-Details Component

We have all the code for supporting the owner-details component. Now it is time to implement business logic inside that component.

Firstly, modify the owner-details.component.ts file:

It is pretty much the same logic as in the owner-list.component.ts file, except now we have the ActivatedRoute imported because we have to get our id from the route.

After we execute the getOwnerDetails function, we are going to store the owner object with all related accounts inside the owner property.

All we have to do is to modify the owner-details.component.html file:

In this code example, we are conditionally displaying the owner entity. Moreover, we are displaying all the accounts related to this owner:

Beginner user - Angular Error Handling


owner-details 2 Angular Error Handling


By reading this post you have learned:

  • How to handle errors in separate service by using Angular Error Handling
  • The way to use the conditional rendering of the HTML page
  • How to create details page for your entity

Thank you for reading the post, hopefully, it was helpful to you.

In the next part of the series, I am going to show you how to create child components and how to use @Input, @Output, and EventEmmiters in Angular. By doing so, you are going to learn to split your components into smaller parts (parent-child relation).

If you have enjoyed reading this article and if you would like to receive the notifications about the freshly published Angular content we encourage you to subscribe to our blog.