As a continuation to a previous post (in which I’ve shown you how to use subscription), we are now going to implement that subscription to our HTTP requests in order to display the data on the page. Furthermore, we are going to use an advantage of lazy content loading, by using another module in our application – the owner module.

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 outCreating Angular client-side – HTTP, Services and environment files

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

This post is divided into several sections:

Creating a New Module

So let’s start.

Create a new folder and name it owner. Inside create a new file and name itowner.module.ts. As you might have noticed we are creating a new module inside the application which is going to be responsible for all the owner operations.

Let’s modify the owner module:

There are two small differences between this module file and app module file. The first difference is that in the app module file we have an import statement for the BrowserModule, and in the owner module file, we have an import statement for the CommonModule. This is because the BrowserModule is only related to the root module in the application.

The second difference is that we don’t have providers array inside the owner module file. That’s because we should register all the services in the root module. That way components will inject the same instance of the service only once and you can keep the state in your service.

Of course, if you really want to register a service inside any child module, you could just add providers array. But, by doing so you cannot keep the state inside your service because every time we create a new instance of that component a new instance of a service is created.

Owner Component and Lazy Loading

Let’s start with the creation of the owner component files.

Execute the AngularCLI command for creating a new component:

This command is going to create the required folder structure and it is going to import this component inside the owner.module.ts file as well:

owner-list folder structure angular lazy loading

What we want now is, when we click on the “Owner-Actions” menu, to show the content from this components HTML file. So first, just for the testing purposes, modify the owner.component.html file by adding one paragraph (<p> tag):

Now modify the app.module.ts file:

With the modified part of the code, we are configuring the app.module to load the owner module whenever someone searches for the http://localhost:4200/owner endpoint. As you might have noticed, we are using the loadChildren property which means, that owner module with its components won’t be loaded until we explicitly ask for them. By doing this, we are configuring lazy loading from the owner module content.

Now if you navigate to the Home page, you will get only resources from the root module, not from the owner module. And only by navigating to the owner-actions menu, you will load the owner module resources into the application.

Routing for the Owner Module

Let’s modify the owner.module.ts:

With this setup, we are exposing our OwnerListComponent on the http://localhost:4200/owner/list endpoint. Moreover, we are using the RouterModule.forChild function and not the forRoot function. This is the case because we should use the forRoot function only in the root module of the application.

Now we have to modify the menu.component.html file:

Excellent.

Now we know how to set up the routing for the child module, and for the component inside that module as well.

child component navigation angular lazy lodaing

Interface, Subscription and Data Display

Let’s continue on.

When we navigate to the Owner Actions menu, we want to show all of the owners to the user. So that means when owner component loads, the app automatically gets all the owners from the server.

To accomplish that, let’s create a new folder, inside app folder and name it _interfaces. Inside create a new file owner.model.ts.

Modify that file:

Modify owner-list.component.ts:

As you might have noticed we have a property with the name owners and it is of type Owner array. Following we execute the subscribe function, which is going to populate that property with all the owners of the server. Using “owners” property to create our owner HTML page is what we aim for.

To accomplish that modify HTML component:

We could split this html file into two components (the parent component: OwnerList and the child component Owner), but because I didn’t explain how to use child components, and I am going to in the next posts, we are going to leave it like this for now.

We are using some basic Bootstrap classes to create a table for showing the owners data. Inside that table, we are looping  (with *ngFor) through all the owners. Then by using interpolation {{}}, we are showing owner properties on the page. For the dateOfBirth property, we are using just the Date pipe to format it the way we want to see it on a screen.

In our application, we are going to use date format as MM/dd/yyyy, but in here we are going to use dd/MM/yyyy just to demonstrate the way to change the format with pipes without too much effort.

owner-list angular lazy loading

Conclusion

By reading this post you have learned:

  • How to create a new module and what imports to use
  • The way to configure lazy loading and how it can help your application
  • How to execute HTTP request with a subscription and to display result data on the page
  • The way to reformat your date type when displaying it

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 my way of error handling while sending HTTP requests. Moreover, we are going to create Details page for the single owner.

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.