Display Book List

Now that our service is ready, we just need to modify our component to display the book list.

Let's start first by importing the service that we have created into our book management system module. Your new module should be similar to the following code:

src/app/applications/book-management-system/book-management-system.module.ts

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { RouterModule, Routes } from "@angular/router";
import { SharedModule } from "@app/shared/shared.module";
import { ListBooksComponent } from './list-books/list-books.component';
import { BmsMainPageComponent } from './bms-main-page/bms-main-page.component';

const routes: Routes = [
  {
    path: "",
    component: BmsMainPageComponent
  },
  {
    path: "list",
    component: ListBooksComponent
  },
];
@NgModule({
  declarations: [ListBooksComponent, BmsMainPageComponent],
  imports: [
    CommonModule,
    SharedModule,
    RouterModule.forChild(routes),
  ],
  exports: [RouterModule]
})
export class BookManagementSystemModule { }

Our service is imported which means that we are can use it. Let's apply this in our file "list-book.component.ts"

src/app/applications/book-management-system/list-books/list-books.component.ts

import { Component, OnInit } from '@angular/core';
import {BmsService} from "@app/shared/services"
import { Book } from "@app/shared/models";
import { BehaviorSubject, Observable } from 'rxjs';


@Component({
  selector: 'app-list-books',
  templateUrl: './list-books.component.html',
  styleUrls: ['./list-books.component.css']
})
export class ListBooksComponent implements OnInit {

  listOfBooks: BehaviorSubject<Book[]> = new BehaviorSubject<Book[]>([]);

  constructor(private bmsService: BmsService) { }

  ngOnInit() {
    this.bmsService.getBooks().subscribe({
      next: (data: Book[]) => this.listOfBooks.next(data),
      error: (data: any) => console.log(data)

    })
  }
  
}

Let's now modify our "list-book.component.html" so that our data will be displayed in a table.

src/app/applications/book-management-system/list-books/list-books.component.html

<div class="table-responsive">
  <table class="table">
    <thead class="thead-dark">
      <tr>
        <th scope="col">#</th>
        <th scope="col">Title</th>
        <th scope="col">Author</th>
        <th scope="col">ISBN</th>
        <th scope="col">Action</th>
      </tr>
    </thead>
    <tbody>
      <ng-container *ngFor="let book of listOfBooks | async; let i = index;">
        <tr>
          <th scope="row">{{i}}</th>
          <td>{{book.Title}}</td>
          <td>{{book.Author}}</td>
          <td>{{book.ISBN}}</td>
          </td>
        </tr>
      </ng-container>
    </tbody>
  </table>
</div>

One final step is to modify our main page component. We want that our main component contains the list book component. We modify the "bms-main-page.component.html"

src/app/applications/book-management-system/bms-main-page/bms-main-page.component.html

<app-navbar></app-navbar>
<div class="container-fluid">
  <div class="row justify-content-center mt-5 h-100">
    <div class="col-6 text-center">
      <div class="main-header">
        <h2>Book Management System</h2>
      </div>
    </div>
  </div>
  <div class="row justify-content-center mt-4">
    <div class="col-6">
      <app-list-books></app-list-books>
    </div>
  </div>
</div>

And we also add some styling by modifying the "bms-main-page.component.css"

src/app/applications/book-management-system/bms-main-page/bms-main-page.component.css

.main-header {
  font-family: "Lato", sans-serif;
  font-size: 2.5rem;
  font-style: normal;
  color: #5b5b5b;
  margin: 0 auto;
}