Edit a Book

[web-dave]

• Generate a book-edit component
• Add a edit route
• Import FormsModule into BooksModule
• Bind book to a template driven form
• Extend the service to save edited book

[web-dave]

books-routing.module.ts

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

book-details.component.html

```html edit ```

books.module.ts

```typescript import { FormsModule } from '@angular/forms'; import ... @NgModule({ imports: [ CommonModule, BooksRoutingModule, FormsModule ], exports: [], declarations: [...], providers: [...] }) export class BooksModule { } ```

book-edit.component.html

```html

Title

Enter a Title

...

Save X

```

book-edit.component.ts

```typescript 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