As a continuation of a previous post (where we learned 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 the advantage of  Angular Lazy 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.

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 with the Angular CLI command for the module creation:

ng g module owner

Let’s inspect the owner module:

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';

  imports: [
  declarations: []
export class OwnerModule { }

There are two small differences between this module file and the 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. That’s 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 Angular Lazy Loading

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

To do that, we are going to execute the AngularCLI command for creating a new component:

ng g component owner/owner-list --skipTests

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.

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

<p>This is owner-list component page.</p>

After that, let’s modify the app.module.ts file:
      { path: 'home', component: HomeComponent },
      { path: 'owner', loadChildren: () => import('./owner/owner.module').then(m => m.OwnerModule) },
      { path: '404', component : NotFoundComponent},
      { path: '', redirectTo: '/home', pathMatch: 'full' },
      { path: '**', redirectTo: '/404', pathMatch: 'full'}

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 the owner module with its components won’t be loaded until we explicitly ask for them. By doing this, we are configuring Angular 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. From the previous statement, we can see why is Angular lazy loading important for Angular applications.

Routing for the Owner Module

Let’s modify the owner.module.ts:

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { RouterModule } from '@angular/router';

import { OwnerListComponent } from './owner-list/owner-list.component';

  imports: [
      { path: 'list', component: OwnerListComponent }
  declarations: [
export class OwnerModule { }

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.

Again, the best practice for large projects is to keep router array in the separate file, but for the sake of the simplicity of this example, we are keeping it inside the forRoot function. If you still want to create a separate routing module, you can learn more about it here: Angular Material Navigation and Routing.

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

<ul class="navbar-nav mr-auto">
  <li class="nav-item">
    <a class="nav-link" [routerLink]="['/owner/list']" routerLinkActive="active" 
      [routerLinkActiveOptions]="{exact: true}"> Owner Actions </a>
   <li class="nav-item">
     <a class="nav-link" href="#">Account Actions </a>


We can check the result:

child component navigation angular lazy lodaing

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

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 the app folder, and name it _interfaces. Inside create a new file owner.model.ts.

Modify that file:

export interface Owner{
    id: string;
    name: string;
    dateOfBirth: Date;
    address: string;

Modify owner-list.component.ts:
import { Component, OnInit } from '@angular/core';
import { RepositoryService } from './../../shared/services/repository.service';
import { Owner } from './../../_interfaces/owner.model';

  selector: 'app-owner-list',
  templateUrl: './owner-list.component.html',
  styleUrls: ['./owner-list.component.css']
export class OwnerListComponent implements OnInit {
  public owners: Owner[];

  constructor(private repository: RepositoryService) { }

  ngOnInit(): void {

  public getAllOwners = () => {
    let apiAddress: string = "api/owner";
    .subscribe(res => {
      this.owners = res as Owner[];

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

To accomplish that, let’s modify the HTML component:

<div class="row"> 
  <div class="offset-10 col-md-2">
    <a href="#">Create owner</a>
<div class="row">
  <div class="col-md-12">
    <div class="table-responsive">
      <table class="table table-striped">
            <th>Owner name</th>
            <th>Owner address</th>
            <th>Date of birth</th>
          <tr *ngFor="let owner of owners">
            <td>{{owner.dateOfBirth | date: 'dd/MM/yyyy'}}</td>
            <td><button type="button" id="details" class="btn btn-light">Details</button></td>
            <td><button type="button" id="update" class="btn btn-success">Update</button></td>
            <td><button type="button" id="delete" class="btn btn-danger">Delete</button></td>

We could split this html file into two components (the parent component: OwnerList and the child component Owner), but because we didn’t explain how to use child components, and we are going to do that 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 showing the owner’s 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 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


By reading this post you have learned:

  • How to create a new module and what imports to use
  • The way to configure Angular 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 a Details page for the single owner.