After assembling all the different parts together, this is how your final code should look like:
import { Component, OnInit } from '@angular/core';
import { FormBuilder } from '@angular/forms'
import { Router } from '@angular/router';
import { BmsService, Book } from '@app/shared';
import { BehaviorSubject } from
.main-header {
font-family: "Lato", sans-serif;
font-size: 2.5rem;
font-style: normal;
color: #5b5b5b;
margin: 0 auto;
}<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>Add New Book</h2>
</div>
</div>
</div>
<div class="row justify-content-center mt-4">
<div class="col-3">
<ng-container *ngIf="this.bookAdded | async">
<div class="alert alert-success alert-dismissible fade show" role="alert">
The Book Has Been Successfully Added.
<button type="button" class="close" data-dismiss="alert" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
</ng-container>
<form [formGroup]="bookForm" (ngSubmit)="onSubmit(bookForm.value)">
<div class="form-group">
<label for="bookTitle">Title</label>
<input type="bookTitle" class="form-control" id="bookTitle" placeholder="Enter title" formControlName="title">
</div>
<div class="form-group">
<label for="bookAuthor">Author</label>
<input type="text" class="form-control" id="bookAuthor" placeholder="Author" formControlName="author">
</div>
<div class="form-group">
<label for="bookISBN">ISBN</label>
<input type="text" class="form-control" id="bookISBN" placeholder="ISBN" formControlName="isbn">
</div>
<button type="submit" class="btn btn-primary">Submit</button>
</form>
<div class="btn-group mt-1" role="group" aria-label="Basic example">
<button type="button" class="btn btn-success" (click)="goBack()">Return</button>
</div>
</div>
</div>
</div>