Edit a Book

[web-dave]

• Generate a book-edit component
• Add a edit route
  book.routes.ts

    {
      path: ':isbn/edit',
      component: BookEditComponent
    }

• Import FormsModule into BookEditComponent
• Bind book to a template driven form
  book-edit.component.html

  <form *ngIf="book" #form="ngForm" (ngSubmit)="saveBook()">
    <div class="form-group">
        <label for="title">Title</label>
        <input 
          type="text" 
          id="title" 
          name="title" 
          required minlength="6" 
          [(ngModel)]="book.title" 
          #title="ngModel">
        <div [hidden]="!title.errors?.['required'] || title.pristine">Enter a Title</div>
    </div>
      ...
    <div>
      <button type="submit" [disabled]="!form.valid">Save</button>
      <a class="btn btn-default btn-sm" [routerLink]="['..']">X</a>
    </div>

  </form>

• Extend the service to save edited book
  book-edit.component.ts

  saveBook() {
    this.booksService.updateBook(this.book)
          .subscribe(() => {
            this.router.navigate(['..'],{relativeTo:this.route});
          });
  }

book.service.ts

```typescript updateBook(book: IBook): Observable { const url = `${this.restRoot}/${book.isbn}`; return this.http.put(url, book); } ```

[web-dave]

NEXT