# Final Code Review

After assembling all the different parts together, this is how your final code should look like:

{% tabs %}
{% tab title="bms-add-book.component.ts" %}

```typescript
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 'rxjs';

@Component({
  selector: 'app-bms-add-book',
  templateUrl: './bms-add-book.component.html',
  styleUrls: ['./bms-add-book.component.css']
})
export class BmsAddBookComponent implements OnInit {
  bookForm;
  bookAdded: BehaviorSubject<boolean> = new BehaviorSubject<boolean>(false);
  constructor(private formBuilder: FormBuilder, private bmsService: BmsService,
   private router: Router) {
    this.bookForm = this.formBuilder.group({
      title: "",
      author: "",
      isbn: 0
    })
  }

  ngOnInit() {
  }

  onSubmit(book: Book) {
    this.bookForm.reset();
    console.warn("Book Data:", book);
    this.bmsService.addBook(book);
    this.bookAdded.next(true);
  }

  goBack() {
    this.router.navigate(["/apps/bms"])
  }
}
```

{% endtab %}

{% tab title="bms-add-book.component.html" %}

```markup
<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">&times;</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>
```

{% endtab %}

{% tab title="bms-add-book.component.css" %}

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

{% endtab %}
{% endtabs %}