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

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

aio/content/examples/toh-pt4/e2e/src/app.e2e-spec.ts

@@ -83,9 +83,13 @@ function selectHeroTests() {
 
   it('shows selected hero details', async () => {
     let page = getPageElts();
+    let message = getMessage();
     let hero = await Hero.fromDetail(page.heroDetail);
     expect(hero.id).toEqual(targetHero.id);
     expect(hero.name).toEqual(targetHero.name.toUpperCase());
+    // Message text contain id number matches the hero.id number
+    expect(message.getText()).toContain(hero.id);
+
   });
 }
 
@@ -131,3 +135,9 @@ function getPageElts() {
     heroDetail: element(by.css('app-root > div, app-root > app-heroes > app-hero-detail > div'))
   };
 }
+
+function getMessage() {
+  let hero = element(by.cssContainingText('li span.badge', targetHero.id.toString()));
+  hero.click();
+  return element.all(by.css('app-root > app-messages > div > div')).get(1);
+}

aio/content/examples/toh-pt4/src/app/heroes/heroes.component.ts

@@ -5,6 +5,7 @@ import { Component, OnInit } from '@angular/core';
 import { Hero } from '../hero';
 // #docregion hero-service-import
 import { HeroService } from '../hero.service';
+import { MessageService } from '../message.service';
 // #enddocregion hero-service-import
 
 @Component({
@@ -21,7 +22,7 @@ export class HeroesComponent implements OnInit {
   // #enddocregion heroes
 
   // #docregion ctor
-  constructor(private heroService: HeroService) { }
+  constructor(private heroService: HeroService, private messageService: MessageService) { }
   // #enddocregion ctor
 
   // #docregion ng-on-init
@@ -32,6 +33,7 @@ export class HeroesComponent implements OnInit {
 
   onSelect(hero: Hero): void {
     this.selectedHero = hero;
+    this.messageService.add(`HeroService: Selected hero id=${hero.id}`);
   }
 
   // #docregion getHeroes

aio/content/tutorial/toh-pt4.md

@@ -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}