In this article, we are going to create the error pages and the details component. The main focus will be on the material components.

We are going to create the Not-Found component, the Server-Error component, and finally the Owner-Details component. Through these components, we will learn how to use different Angular Material components in our project.

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

The source code is available at GitHub Angular Material Error and Details Pages – Source Code

So, let’s start.

We are going to divide this post into several sections:

Not-Found Component and Material Progress Bar

The first thing we need to do is to create a new not-found component:

not found component creation - angular material progress bar

After that, we are going to change the routes in the main routing module:

Now, if we try to load some non-existing address, we will get the NotFound component instead, with the “not-found works”.

Of course, we don’t want this message, so we are going to modify the not-found.component.html file:

As we can see, we are using the mat-progress-bar material component, and for that reason, we need to import the required module into the material.module.ts file:

Finally, let’s add some styles to the not-found.component.css file:

That is it. We can inspect our result by typing a none-existing URL (localhost:4200/something):

not-found - angular material progress bar

 

This looks good.

Let’s continue with the Server-Error component.

Server-Error Component With Spinner and CheckBox Material Components

We are going to start with Server-Error component creation:

Having that done, let’s modify the routing file:

For the visual experience, we need to modify the server-error.component.html file:

Because we are using the checkbox and progress-spinner components, we need to import their modules into the material.module.ts file:

Ok, we have imported all the necessary modules and now we are going to  modify the server-error.component.ts file:

And finally, let’s modify the server-error.component.css file:

Our result should look like this:

server-error finished - angular material progress bar

Error Handling Service

It is not enough just to have the error pages, we need to handle errors and to redirect the user to the required page. For that, we are going to create an error-handler service.

We are just going to write our code, without any explanation because this is all angular specific. We have a great article .NET Core 2.0, Angular and Mysql. Error Handling in which we have explained everything related to the topic.

So, let’s create a service and modify it:

For now, this service can be implemented only in the owner-list component, so let’s do that:

That is it. Now if our server returns the not found response we will redirect a user to the not found page. Same will happen for the internal server error, just another page.

Details Page – Card, Select and Expansion Panel Components

In this section, we are going to create details functionality for our application. To do that, let’s first create the owner-details component:

owner-details-creation

Then, let’s configure the routes for this new component the owner-routing.module.ts file:

After that, let’s modify the owner-list.component.ts file:

Right now, we can navigate to our details page by clicking on the details button on the owner-list component. The next thing we are going to do is to add an additional interface and change our existing one:

After all of these changes, we need to modify the owner-details component, to show our details data on the page.

So, let’s start with the owner-details.component.ts file:

Excellent.

We have prepared the logic to fetch the data from the server, so the obvious continuation is to show that data on the HTML page.

Because we are going to have a lot of code for this component, we are going to create two additional components to spread our HTML code between them.

That being said, let’s create those components:

Owner-Data Component

We are going to modify the owner-data component first.

The HTML part:

Because we are using the mat-card component and the mat-select component, we need to import modules inside the material.module.ts file:

Next thing we need to do is to modify the owner-data.component.ts file:

And finally, let’s modify the CSS file:

In order to show our data, we need to include our components inside the owner-details component and check the current progress:

owner details part 1

Account-Data Component

Let’s modify the HTML part of this component first:

Then, let’s import the module for the accordion:

After that, we need to modify the account-data.component.ts file:

And, to modify the CSS file:

Excellent.

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

Our completed page should look like this:

owner details completed

Conclusion

And there you go. We have created additional pages in our project and made them functional and prettier by using Angular Material Components.

So, to summarize, we have learned:

  • How to use Material Progress Bar and Spinner components
  • The way to use CheckBox, Select and Card components
  • To show additional data by using the Expansion-Panel component

In the next article, we are going to show you how to use Material Input components and to validate forms as well.

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.