starting point

db.json

@@ -3,12 +3,15 @@
     {
       "id": "1",
       "name": "Interstellar",
-      "rating": 4.5
+      "description": "Space",
+      "earnings": 25000000
     },
     {
       "id": "2",
       "name": "Inception",
-      "rating": 1.0
+      "description": "I forgot",
+      "earnings": 50000000
     }
-  ]
-}
+  ],
+  "books": []
+}

package.json

@@ -3,7 +3,8 @@
   "version": "0.0.0",
   "scripts": {
     "ng": "ng",
-    "start": "ng serve",
+    "start": "concurrently \"npm run server\" \"ng serve\"",
+    "server": "json-server db.json --watch",
     "build": "ng build",
     "test": "jest",
     "lint": "ng lint",
@@ -18,16 +19,20 @@
   "private": true,
   "dependencies": {
     "@angular/animations": "~7.2.0",
+    "@angular/cdk": "~7.3.0",
     "@angular/common": "~7.2.0",
     "@angular/compiler": "~7.2.0",
     "@angular/core": "~7.2.0",
     "@angular/forms": "~7.2.0",
+    "@angular/material": "~7.3.0",
     "@angular/platform-browser": "~7.2.0",
     "@angular/platform-browser-dynamic": "~7.2.0",
     "@angular/router": "~7.2.0",
     "@ngrx/effects": "^7.4.0",
     "@ngrx/entity": "^7.4.0",
+    "@ngrx/router-store": "^7.4.0",
     "@ngrx/store": "^7.4.0",
+    "@ngrx/store-devtools": "^7.4.0",
     "core-js": "^2.5.4",
     "rxjs": "~6.3.3",
     "tslib": "^1.9.0",

src/app/app.component.css

@@ -0,0 +1,32 @@
+:host {
+  display: flex;
+  flex-direction: column;
+  flex: 1;
+}
+
+.nav-link {
+  color: rgba(0,0,0,.54);
+  display: flex;
+  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);
+  z-index: 1;
+}
+
+mat-toolbar > .mat-mini-fab {
+  margin-right: 10px;
+}
+
+mat-sidenav {
+  box-shadow: 3px 0 6px rgba(0,0,0,.24);
+  width: 200px;
+}
+
+.mat-sidenav-container {
+  background: #f5f5f5;
+  flex: 1;
+}

src/app/app.component.html

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

src/app/app.component.ts

@@ -1,11 +1,14 @@
 import { Component } from "@angular/core";
 
 @Component({
-  selector: "ngrx-root",
-  template: `
-    <h1>NgRx Workshop Example</h1>
-    <router-outlet></router-outlet>
-  `,
-  styles: []
+  selector: "app-root",
+  templateUrl: './app.component.html',
+  styleUrls: ['./app.component.css']
 })
-export class AppComponent {}
+export class AppComponent {
+  title = 'NgRx Workshop';
+  links = [
+    { path: '/movies', icon: 'movie', label: 'Movies'},
+    { path: '/books', icon: 'book', label: 'Books'}
+  ];  
+}

src/app/app.module.ts

@@ -1,23 +1,37 @@
 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 { AppRoutingModule } from "./app-routing.module";
-import { AppComponent } from "./app.component";
 import { StoreModule } from "@ngrx/store";
-import { reducers, metaReducers } from "./shared/state";
+import { StoreDevtoolsModule } from "@ngrx/store-devtools";
 import { EffectsModule } from "@ngrx/effects";
+
+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';
+
 @NgModule({
   declarations: [AppComponent],
   imports: [
     BrowserModule,
-    AppRoutingModule,
+    BrowserAnimationsModule,
+    HttpClientModule,
+    RouterModule.forRoot([
+      { path: '', pathMatch: 'full', redirectTo: '/movies' }
+    ]),
     StoreModule.forRoot(reducers, { metaReducers }),
+    StoreDevtoolsModule.instrument(),
     EffectsModule.forRoot([]),
-    MoviesModule
+    MaterialModule,
+    MoviesModule,
+    BooksModule
   ],
-  providers: [],
   bootstrap: [AppComponent]
 })
 export class AppModule {}

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

@@ -0,0 +1,2 @@
+import { Book } from "src/app/shared/models/book.model";
+import { Action } from "@ngrx/store";

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

@@ -0,0 +1,2 @@
+import { Book } from "src/app/shared/models/book.model";
+import { Action } from "@ngrx/store";

src/app/books/actions/index.ts

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

src/app/books/books.module.ts

@@ -0,0 +1,29 @@
+import { NgModule } from "@angular/core";
+import { CommonModule } from '@angular/common';
+import { RouterModule } from '@angular/router';
+import { ReactiveFormsModule } from '@angular/forms';
+
+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';
+
+@NgModule({
+  imports: [
+    CommonModule,
+    ReactiveFormsModule,
+    MaterialModule,
+    RouterModule.forChild([
+      { path: 'books', component: BooksPageComponent }
+    ]),
+  ],
+  declarations: [
+    BooksPageComponent,
+    BookDetailComponent,
+    BooksListComponent,
+    BooksTotalComponent
+  ]
+})
+export class BooksModule {}

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

@@ -0,0 +1,9 @@
+mat-card-actions {
+  margin-bottom: 0;
+}
+mat-card-header {
+  margin-bottom: 10px;
+}
+.full-width {
+  width: 100%;
+}

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

@@ -0,0 +1,27 @@
+<mat-card>
+  <mat-card-header>
+    <mat-card-title>
+      <h1>
+        <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">
+      </mat-form-field>
+      <mat-form-field class="full-width">
+        <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">
+      </mat-form-field>
+    </mat-card-content>
+    <mat-card-actions>
+      <button type="submit" mat-button>Save</button>
+      <button type="button" mat-button (click)="cancel.emit()">Cancel</button>
+    </mat-card-actions>
+  </form>
+</mat-card>

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

@@ -0,0 +1,11 @@
+/* tslint:disable:no-unused-variable */
+
+import { TestBed, async } from '@angular/core/testing';
+import { BookDetailComponent } from './book-detail.component';
+
+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

@@ -0,0 +1,39 @@
+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']
+})
+export class BookDetailComponent {
+  originalBook: Book | undefined;
+  @Output() save = new EventEmitter();
+  @Output() cancel = new EventEmitter();
+
+  bookForm = new FormGroup({
+    name: new FormControl(''),
+    earnings: new FormControl(0),
+    description: new FormControl('')
+  });
+
+  @Input() set book(book: Book) {
+    this.bookForm.reset();
+    this.originalBook = null;
+
+    if (book) {
+      this.bookForm.setValue({
+        name: book.name,
+        earnings: book.earnings,
+        description: book.description
+      });
+
+      this.originalBook = book;
+    }
+  }
+
+  onSubmit(book: Book) {
+    this.save.emit({ ...this.originalBook, ...book });
+  }
+}

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

@@ -0,0 +1,7 @@
+mat-list-item:not(:first-of-type) {
+  border-top: 1px solid #efefef;
+}
+
+.symbol {
+  color: #777;
+}

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

@@ -0,0 +1,23 @@
+<mat-card>
+  <mat-card-header>
+    <mat-card-title>
+      <h1>Books</h1>
+    </mat-card-title>
+  </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>
+        <p mat-line>
+          {{book.description}}
+        </p>
+        <p>
+          {{book.earnings | currency}}
+        </p>
+        <button *ngIf="!readonly" mat-icon-button (click)="delete.emit(book);$event.stopImmediatePropagation();">
+          <mat-icon>close</mat-icon>
+        </button>
+      </mat-list-item>
+    </mat-list>
+  </mat-card-content>
+</mat-card>

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

@@ -0,0 +1,11 @@
+/* tslint:disable:no-unused-variable */
+
+import { TestBed, async } from '@angular/core/testing';
+import { BooksListComponent } from './books-list.component';
+
+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

@@ -0,0 +1,14 @@
+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']
+})
+export class BooksListComponent {
+  @Input() books: Book[];
+  @Input() readonly = false;
+  @Output() select = new EventEmitter();
+  @Output() delete = new EventEmitter();
+}

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

@@ -0,0 +1,4 @@
+:host >>> mat-list-item:hover {
+  cursor: pointer;
+  background: whitesmoke;
+}