Skip to content
This repository was archived by the owner on Dec 4, 2017. It is now read-only.

docs(toh): add instructions to add the goBack method #1478

Closed
wants to merge 1 commit into from
Closed
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 2 additions & 0 deletions public/docs/_examples/toh-6/ts/app/hero-detail.component.ts
Original file line number Diff line number Diff line change
Expand Up @@ -45,9 +45,11 @@ export class HeroDetailComponent implements OnInit {
.catch(error => this.error = error); // TODO: Display error message
}
// #enddocregion save
// #docregion goback
goBack(savedHero: Hero = null) {
this.close.emit(savedHero);
if (this.navigated) { window.history.back(); }
}
// #enddocregion goback
}

17 changes: 11 additions & 6 deletions public/docs/ts/latest/tutorial/toh-pt6.jade
Original file line number Diff line number Diff line change
Expand Up @@ -220,19 +220,24 @@ code-example(format="." language="bash").
### Add/Edit in the *HeroDetailComponent*
We already have `HeroDetailComponent` for viewing details about a specific hero. Add and Edit are natural extensions of the detail view, so we are able to reuse `DetailHeroComponent` with a few tweaks. The original component was created to render existing data, but to add new data we have to initialize the `hero` property to an empty `Hero` object.

+makeExample('toh-6/ts/app/hero-detail.component.ts', 'ngOnInit', 'app/hero-detail.component.ts (ngOnInit)')(format=".")
+makeExample('toh-6/ts/app/hero-detail.component.ts', 'ngOnInit', 'app/hero-detail.component.ts (ngOnInit)')(format=".")

:marked
In order to differentiate between add and edit we are adding a check to see if an id is passed in the url. If the id is absent we bind `HeroDetailComponent` to an empty `Hero` object. In either case, any edits made through the UI will be bound back to the same `hero` property.

The next step is to add a save method to `HeroDetailComponent` and call the corresponding save method in `HeroesService`.

+makeExample('toh-6/ts/app/hero-detail.component.ts', 'save', 'app/hero-detail.component.ts (save)')(format=".")
+makeExample('toh-6/ts/app/hero-detail.component.ts', 'save', 'app/hero-detail.component.ts (save)')(format=".")

:marked
The same save method is used for both add and edit since `HeroService` will know when to call `post` vs `put` based on the state of the `Hero` object.

Earlier we used the `save()` method to return a promise, so when the promise resolves, we call `emit` to notify `HeroesComponent` that we just added or modified a hero. `HeroesComponent` is listening for this notification and will automatically refresh the list of heroes to include our recent updates.
After we save a hero, we redirect the browser back to the to the previous page using the `goBack()` method.

+makeExample('toh-6/ts/app/hero-detail.component.ts', 'goback', 'app/hero-detail.component.ts (goBack)')(format=".")

:marked
Here we call `emit` to notify that we just added or modified a hero. `HeroesComponent` is listening for this notification and will automatically refresh the list of heroes to include our recent updates.

.l-sub-section
:marked
Expand All @@ -242,7 +247,7 @@ code-example(format="." language="bash").
Here is `HeroDetailComponent` with its new save button.

figure.image-display
img(src='/resources/images/devguide/toh/hero-details-save-button.png' alt="Hero Details With Save Button")
img(src='/resources/images/devguide/toh/hero-details-save-button.png' alt="Hero Details With Save Button")

:marked
### Add/Delete in the *HeroesComponent*
Expand All @@ -254,12 +259,12 @@ figure.image-display
As we noted above, that is the component's cue to create and present an empty hero.

Add the following HTML to the `heroes.component.html`, just below the hero list (the `*ngFor`).
+makeExample('toh-6/ts/app/heroes.component.html', 'add-hero', 'app/heroes.component.ts (add)')(format=".")
+makeExample('toh-6/ts/app/heroes.component.html', 'add-hero', 'app/heroes.component.ts (add)')(format=".")
:marked
The user can *delete* an existing hero by clicking a delete button next to the hero's name.

Add the following HTML to the `heroes.component.html` right after the name in the repeated `<li>` tag:
+makeExample('toh-6/ts/app/heroes.component.html', 'delete-hero', 'app/heroes.component.ts (delete)')(format=".")
+makeExample('toh-6/ts/app/heroes.component.html', 'delete-hero', 'app/heroes.component.ts (delete)')(format=".")

:marked
Now let's fix-up the `HeroesComponent` to support the *add* and *delete* actions in the template.
Expand Down