cargdev/angular
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

docs: add message on click of hero in toh-4 (#34496)

Browse Source 
First we used a messages array to display messages toh-4 but it dsplayed only one message added additional messages on click of a hero

Fixes #28739

PR Close #34496
This commit is contained in:
ajitsinghkaler
2019-12-28 12:01:54 +05:30
committed by Matias Niemelä
parent e7cf37d99f
commit 61ad50d40a
3 changed files with 30 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files

22
aio/content/tutorial/toh-pt4.md
View File

@ -16,10 +16,11 @@ you'll rely on Angular [*dependency injection*](guide/dependency-injection)
to inject it into the `HeroesComponent` constructor.
Services are a great way to share information among classes that _don't know each other_.
You'll create a `MessageService` and inject it in two places:
You'll create a `MessageService` and inject it in two places.
1. in `HeroService` which uses the service to send a message
2. in `MessagesComponent` which displays that message
1. Inject in HeroService, which uses the service to send a message.
2. Inject in MessagesComponent, which displays that message, and also displays the ID
when the user clicks a hero.
## Create the `HeroService`
@ -367,9 +368,20 @@ to `MessageService.clear()`.
The messages will look better when you add the private CSS styles to `messages.component.css`
as listed in one of the ["final code review"](#final-code-review) tabs below.
## Add additional messages to hero service
The following example shows how to send and display a message each time the user clicks on
a hero, showing a history of the user's selections. This will be helpful when you get to the
next section on [Routing](tutorial/toh-pt5).
<code-example header="src/app/heroes/heroes.component.ts"
path="toh-pt4/src/app/heroes/heroes.component.ts">
</code-example>
The browser refreshes and the page displays the list of heroes.
Scroll to the bottom to see the message from the `HeroService` in the message area.
Click the "clear" button and the message area disappears.
Refresh the browser to see the list of heroes, and scroll to the bottom to see the
messages from the HeroService. Each time you click a hero, a new message appears to record
the selection. Use the "clear" button to clear the message history.
{@a final-code-review}