src/app/app.component.css

@@ -5,15 +5,16 @@
 }
 
 .nav-link {
-  color: rgba(0,0,0,.54);
+  color: rgba(0, 0, 0, 0.54);
   display: flex;
-  align-items:center;
+  align-items: center;
   padding-top: 5px;
   padding-bottom: 5px;
 }
 
 mat-toolbar {
-  box-shadow: 0 3px 5px -1px rgba(0,0,0,.2), 0 6px 10px 0 rgba(0,0,0,.14), 0 1px 18px 0 rgba(0,0,0,.12);
+  box-shadow: 0 3px 5px -1px rgba(0, 0, 0, 0.2),
+    0 6px 10px 0 rgba(0, 0, 0, 0.14), 0 1px 18px 0 rgba(0, 0, 0, 0.12);
   z-index: 1;
 }
 
@@ -22,7 +23,7 @@ mat-toolbar > .mat-mini-fab {
 }
 
 mat-sidenav {
-  box-shadow: 3px 0 6px rgba(0,0,0,.24);
+  box-shadow: 3px 0 6px rgba(0, 0, 0, 0.24);
   width: 200px;
 }
 

src/app/app.component.html

@@ -1,5 +1,7 @@
 <mat-toolbar color="primary">
-  <button (click)="sidenav.toggle()" mat-mini-fab><mat-icon>menu</mat-icon></button>
+  <button (click)="sidenav.toggle()" mat-mini-fab>
+    <mat-icon>menu</mat-icon>
+  </button>
   <span>
     {{ title }}
   </span>
@@ -8,13 +10,15 @@
 <mat-sidenav-container>
   <mat-sidenav #sidenav mode="side" class="app-sidenav">
     <nav>
-      <a mat-button
+      <a
+        mat-button
         class="nav-link"
         *ngFor="let link of links"
         [routerLink]="link.path"
-        routerLinkActive="active">
-        <mat-icon>{{link.icon}}</mat-icon>
-        {{link.label}}
+        routerLinkActive="active"
+      >
+        <mat-icon>{{ link.icon }}</mat-icon>
+        {{ link.label }}
       </a>
     </nav>
   </mat-sidenav>

src/app/app.component.ts

@@ -2,13 +2,13 @@ import { Component } from "@angular/core";
 
 @Component({
   selector: "app-root",
-  templateUrl: './app.component.html',
-  styleUrls: ['./app.component.css']
+  templateUrl: "./app.component.html",
+  styleUrls: ["./app.component.css"]
 })
 export class AppComponent {
-  title = 'NgRx Workshop';
+  title = "NgRx Workshop";
   links = [
-    { path: '/movies', icon: 'movie', label: 'Movies'},
-    { path: '/books', icon: 'book', label: 'Books'}
-  ];  
+    { path: "/movies", icon: "movie", label: "Movies" },
+    { path: "/books", icon: "book", label: "Books" }
+  ];
 }

src/app/app.module.ts

@@ -1,20 +1,20 @@
 import { BrowserModule } from "@angular/platform-browser";
 import { BrowserAnimationsModule } from "@angular/platform-browser/animations";
 import { NgModule } from "@angular/core";
-import { RouterModule } from '@angular/router';
-import { HttpClientModule } from '@angular/common/http';
+import { RouterModule } from "@angular/router";
+import { HttpClientModule } from "@angular/common/http";
 
 import { StoreModule } from "@ngrx/store";
 import { StoreDevtoolsModule } from "@ngrx/store-devtools";
 import { EffectsModule } from "@ngrx/effects";
 
-import { MaterialModule } from './material.module';
+import { MaterialModule } from "./material.module";
 import { MoviesModule } from "./movies/movies.module";
 
 import { AppComponent } from "./app.component";
 
 import { reducers, metaReducers } from "./shared/state";
-import { BooksModule } from './books/books.module';
+import { BooksModule } from "./books/books.module";
 
 @NgModule({
   declarations: [AppComponent],
@@ -23,7 +23,7 @@ import { BooksModule } from './books/books.module';
     BrowserAnimationsModule,
     HttpClientModule,
     RouterModule.forRoot([
-      { path: '', pathMatch: 'full', redirectTo: '/movies' }
+      { path: "", pathMatch: "full", redirectTo: "/movies" }
     ]),
     StoreModule.forRoot(reducers, { metaReducers }),
     StoreDevtoolsModule.instrument(),

src/app/books/actions/books-page.actions.ts

@@ -2,12 +2,12 @@ import { Book } from "src/app/shared/models/book.model";
 import { Action } from "@ngrx/store";
 
 export enum BooksActionTypes {
-  Enter = '[Books Page] Enter',
-  SelectBook = '[Books Page] Select Book',
-  ClearSelectedBook = '[Books Page] Clear Selected Book',
-  CreateBook = '[Books Page] Create Book',
-  UpdateBook = '[Books Page] Update Book',
-  DeleteBook = '[Books Page] Delete Book'
+  Enter = "[Books Page] Enter",
+  SelectBook = "[Books Page] Select Book",
+  ClearSelectedBook = "[Books Page] Clear Selected Book",
+  CreateBook = "[Books Page] Create Book",
+  UpdateBook = "[Books Page] Update Book",
+  DeleteBook = "[Books Page] Delete Book"
 }
 
 export class Enter implements Action {
@@ -29,7 +29,7 @@ export class CreateBook implements Action {
 
   constructor(public book: Book) {}
 }
-  
+
 export class UpdateBook implements Action {
   readonly type = BooksActionTypes.UpdateBook;
 
@@ -42,11 +42,10 @@ export class DeleteBook implements Action {
   constructor(public book: Book) {}
 }
 
-export type BooksActions = 
+export type BooksActions =
   | Enter
   | SelectBook
   | ClearSelectedBook
   | CreateBook
   | UpdateBook
-  | DeleteBook
-;
+  | DeleteBook;

src/app/books/actions/index.ts

@@ -1,4 +1,4 @@
-import * as BooksPageActions from './books-page.actions';
-import * as BooksApiActions from './books-api.actions';
+import * as BooksPageActions from "./books-page.actions";
+import * as BooksApiActions from "./books-api.actions";
 
-export { BooksPageActions, BooksApiActions };
+export { BooksPageActions, BooksApiActions };

src/app/books/books.module.ts

@@ -1,23 +1,21 @@
 import { NgModule } from "@angular/core";
-import { CommonModule } from '@angular/common';
-import { RouterModule } from '@angular/router';
-import { ReactiveFormsModule } from '@angular/forms';
+import { CommonModule } from "@angular/common";
+import { RouterModule } from "@angular/router";
+import { ReactiveFormsModule } from "@angular/forms";
 
-import { MaterialModule } from 'src/app/material.module';
+import { MaterialModule } from "src/app/material.module";
 
-import { BooksPageComponent } from './components/books-page/books-page.component';
-import { BookDetailComponent } from './components/book-detail/book-detail.component';
-import { BooksListComponent } from './components/books-list/books-list.component';
-import { BooksTotalComponent } from './components/books-total/books-total.component';
+import { BooksPageComponent } from "./components/books-page/books-page.component";
+import { BookDetailComponent } from "./components/book-detail/book-detail.component";
+import { BooksListComponent } from "./components/books-list/books-list.component";
+import { BooksTotalComponent } from "./components/books-total/books-total.component";
 
 @NgModule({
   imports: [
     CommonModule,
     ReactiveFormsModule,
     MaterialModule,
-    RouterModule.forChild([
-      { path: 'books', component: BooksPageComponent }
-    ]),
+    RouterModule.forChild([{ path: "books", component: BooksPageComponent }])
   ],
   declarations: [
     BooksPageComponent,

src/app/books/components/book-detail/book-detail.component.html

@@ -2,21 +2,33 @@
   <mat-card-header>
     <mat-card-title>
       <h1>
-        <span *ngIf="originalBook?.id; else prompt">Editing {{originalBook.name}}</span>
+        <span *ngIf="originalBook?.id; else prompt"
+          >Editing {{ originalBook.name }}</span
+        >
         <ng-template #prompt>Create Book</ng-template>
       </h1>
     </mat-card-title>
   </mat-card-header>
   <form [formGroup]="bookForm" #f="ngForm" (submit)="onSubmit(f.value)">
     <mat-card-content>
       <mat-form-field class="full-width">
-        <input matInput placeholder="Name" formControlName="name" type="text">
+        <input matInput placeholder="Name" formControlName="name" type="text" />
       </mat-form-field>
       <mat-form-field class="full-width">
-        <input matInput placeholder="Earnings" formControlName="earnings" type="text">
+        <input
+          matInput
+          placeholder="Earnings"
+          formControlName="earnings"
+          type="text"
+        />
       </mat-form-field>
       <mat-form-field class="full-width">
-        <input matInput placeholder="Description" formControlName="description" type="text">
+        <input
+          matInput
+          placeholder="Description"
+          formControlName="description"
+          type="text"
+        />
       </mat-form-field>
     </mat-card-content>
     <mat-card-actions>

src/app/books/components/book-detail/book-detail.component.spec.ts

@@ -1,10 +1,10 @@
 /* tslint:disable:no-unused-variable */
 
-import { TestBed, async } from '@angular/core/testing';
-import { BookDetailComponent } from './book-detail.component';
+import { TestBed, async } from "@angular/core/testing";
+import { BookDetailComponent } from "./book-detail.component";
 
-describe('Component: BookDetail', () => {
-  it('should create an instance', () => {
+describe("Component: BookDetail", () => {
+  it("should create an instance", () => {
     const component = new BookDetailComponent();
     expect(component).toBeTruthy();
   });

src/app/books/components/book-detail/book-detail.component.ts

@@ -1,21 +1,21 @@
-import { Component, EventEmitter, Input, Output } from '@angular/core';
-import { Book } from 'src/app/shared/models/book.model';
-import { FormGroup, FormControl } from '@angular/forms';
+import { Component, EventEmitter, Input, Output } from "@angular/core";
+import { Book } from "src/app/shared/models/book.model";
+import { FormGroup, FormControl } from "@angular/forms";
 
 @Component({
-  selector: 'app-book-detail',
-  templateUrl: './book-detail.component.html',
-  styleUrls: ['./book-detail.component.css']
+  selector: "app-book-detail",
+  templateUrl: "./book-detail.component.html",
+  styleUrls: ["./book-detail.component.css"]
 })
 export class BookDetailComponent {
   originalBook: Book | undefined;
   @Output() save = new EventEmitter();
   @Output() cancel = new EventEmitter();
 
   bookForm = new FormGroup({
-    name: new FormControl(''),
+    name: new FormControl(""),
     earnings: new FormControl(0),
-    description: new FormControl('')
+    description: new FormControl("")
   });
 
   @Input() set book(book: Book) {

src/app/books/components/books-list/books-list.component.html

@@ -6,15 +6,23 @@ <h1>Books</h1>
   </mat-card-header>
   <mat-card-content>
     <mat-list>
-      <mat-list-item *ngFor="let book of books" (click)="select.emit(book)" class="record">
-        <h3 mat-line>{{book.name}}</h3>
+      <mat-list-item
+        *ngFor="let book of books"
+        (click)="select.emit(book)"
+        class="record"
+      >
+        <h3 mat-line>{{ book.name }}</h3>
         <p mat-line>
-          {{book.description}}
+          {{ book.description }}
         </p>
         <p>
-          {{book.earnings | currency}}
+          {{ book.earnings | currency }}
         </p>
-        <button *ngIf="!readonly" mat-icon-button (click)="delete.emit(book);$event.stopImmediatePropagation();">
+        <button
+          *ngIf="!readonly"
+          mat-icon-button
+          (click)="delete.emit(book); $event.stopImmediatePropagation()"
+        >
           <mat-icon>close</mat-icon>
         </button>
       </mat-list-item>

src/app/books/components/books-list/books-list.component.spec.ts

@@ -1,10 +1,10 @@
 /* tslint:disable:no-unused-variable */
 
-import { TestBed, async } from '@angular/core/testing';
-import { BooksListComponent } from './books-list.component';
+import { TestBed, async } from "@angular/core/testing";
+import { BooksListComponent } from "./books-list.component";
 
-describe('Component: BooksList', () => {
-  it('should create an instance', () => {
+describe("Component: BooksList", () => {
+  it("should create an instance", () => {
     const component = new BooksListComponent();
     expect(component).toBeTruthy();
   });

src/app/books/components/books-list/books-list.component.ts

@@ -1,10 +1,10 @@
-import { Component, EventEmitter, Input, Output } from '@angular/core';
-import { Book } from 'src/app/shared/models/book.model';
+import { Component, EventEmitter, Input, Output } from "@angular/core";
+import { Book } from "src/app/shared/models/book.model";
 
 @Component({
-  selector: 'app-books-list',
-  templateUrl: './books-list.component.html',
-  styleUrls: ['./books-list.component.css']
+  selector: "app-books-list",
+  templateUrl: "./books-list.component.html",
+  styleUrls: ["./books-list.component.css"]
 })
 export class BooksListComponent {
   @Input() books: Book[];

src/app/books/components/books-page/books-page.component.html

@@ -1,19 +1,20 @@
 <div class="container">
   <div class="col-50">
-    <app-books-total
-      [total]="total">
-    </app-books-total>
+    <app-books-total [total]="total"> </app-books-total>
 
     <app-books-list
       [books]="books$ | async"
       (select)="onSelect($event)"
-      (delete)="onDelete($event)">
+      (delete)="onDelete($event)"
+    >
     </app-books-list>
   </div>
 
-  <app-book-detail class="col-50"
+  <app-book-detail
+    class="col-50"
     [book]="currentBook"
     (save)="onSave($event)"
-    (cancel)="onCancel()">
+    (cancel)="onCancel()"
+  >
   </app-book-detail>
 </div>