While sending requests to our web API server, we can get an error in a response. Therefore, handling 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 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.

For the previous part check outPart 10 – Creating Angular client side – Lazy loading

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 folder error-pages create a complete file and folder structure by typing the AngularCLI command:

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

Then modify the internal-server.component.html:

Modify the internal-server.component.css as well:

Finally, 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 error handling

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

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

Don’t forget to import this service into the app.module.ts file, and to register it inside the providers array.

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 this 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 a 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 a component for the owner details.

Create a new folder and owner-details component files inside the owner folder and import that component inside the owner.module.ts file.

owner-details structure in Angular Error Handling

If you prefer, you can use the AngularCLI to achieve the same effect:

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

As you might have noticed, the new path now 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.

Change the owner-list.component.html:

On a click event we are calling the getOwnerDetails function and passing the owners 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

Conclusion

By reading this post you have learned:

  • How to handle errors in separate service
  • 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.