docs: fix issues related to tutorial. (#24445)

PR Close #24445

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

@@ -12,16 +12,17 @@ import { HEROES } from '../mock-heroes';
   styleUrls: ['./heroes.component.css']
 })
 // #enddocregion metadata
+
+// #docregion component
 export class HeroesComponent implements OnInit {
 
   // #docregion heroes
   heroes = HEROES;
   // #enddocregion heroes
-
+  // #enddocregion component
   // #docregion on-select
   selectedHero: Hero;
-
-  // #enddocregion on-select
+ // #enddocregion on-select
 
   constructor() { }
 

aio/content/examples/toh-pt5/src/app/dashboard/dashboard.component.html

@@ -3,9 +3,9 @@
   <!-- #docregion click -->
   <a *ngFor="let hero of heroes" class="col-1-4"
       routerLink="/detail/{{hero.id}}">
-  <!-- #enddocregion click -->
     <div class="module hero">
       <h4>{{hero.name}}</h4>
     </div>
   </a>
+   <!-- #enddocregion click -->
 </div>

aio/content/examples/toh-pt6/src/app/in-memory-data.service.ts

@@ -1,5 +1,6 @@
 // #docregion , init
 import { InMemoryDbService } from 'angular-in-memory-web-api';
+import { Hero } from './hero';
 
 export class InMemoryDataService implements InMemoryDbService {
   createDb() {
@@ -17,4 +18,13 @@ export class InMemoryDataService implements InMemoryDbService {
     ];
     return {heroes};
   }
+
+  // Overrides the genId method to ensure that a hero always has an id.
+  // If the heroes array is empty,
+  // the method below returns the initial number (11).
+  // if the heroes array is not empty, the method below returns the highest
+  // hero id + 1.
+  genId(heroes: Hero[]): number {
+    return heroes.length > 0 ? Math.max(...heroes.map(hero => hero.id)) + 1 : 11;
+  }
 }

aio/content/tutorial/toh-pt2.md

@@ -28,9 +28,9 @@ Open the `HeroesComponent` class file and import the mock `HEROES`.
 <code-example path="toh-pt2/src/app/heroes/heroes.component.ts" region="import-heroes" title="src/app/heroes/heroes.component.ts (import HEROES)">
 </code-example>
 
-Add a `heroes` property to the class that exposes these heroes for binding.
+In the same file (`HeroesComponent` class), define a component property called `heroes` to expose `HEROES` array for binding.
 
-<code-example path="toh-pt2/src/app/heroes/heroes.component.ts" region="heroes">
+<code-example path="toh-pt2/src/app/heroes/heroes.component.ts" region="component">
 </code-example>
 
 ### List heroes with _*ngFor_
@@ -245,6 +245,7 @@ Here are the code files discussed on this page, including the `HeroesComponent`
 
   <code-pane title="src/app/heroes/heroes.component.css" path="toh-pt2/src/app/heroes/heroes.component.css">
   </code-pane>
+
 </code-tabs>
 
 ## Summary

aio/content/tutorial/toh-pt3.md

@@ -18,7 +18,19 @@ Use the Angular CLI to generate a new component named `hero-detail`.
   ng generate component hero-detail
 </code-example>
 
-The command scaffolds the `HeroDetailComponent` files and declares the component in `AppModule`.
+The command scaffolds the following:
+
+* Creates a directory `src/app/hero-detail`.
+
+Inside that directory four files are generated:
+
+* A CSS file for the component styles.
+* An HTML file for the component template.
+* A TypeScript file with a component class named `HeroDetailComponent`.
+* A test file for the `HeroDetailComponent` class.
+
+The command also adds the `HeroDetailComponent` as a declaration in the `@NgModule` decorator of the `src/app/app.module.ts` file.
+
 
 ### Write the template
 

aio/content/tutorial/toh-pt6.md

@@ -66,7 +66,7 @@ which you will create in a moment.
 </code-example>
 
 Add the `HttpClientInMemoryWebApiModule` to the `@NgModule.imports` array&mdash;
-_after importing the `HttpClient`_,
+_after importing the `HttpClientModule`_,
 &mdash;while configuring it with the `InMemoryDataService`.
 
 <code-example   
@@ -114,7 +114,9 @@ you'll wrap it in private `log` method.
   region="log" >
 </code-example>
 
-Define the `heroesUrl` with the address of the heroes resource on the server.
+Define the `heroesUrl` of the form `:base/:collectionName` with the address of the heroes resource on the server.
+ Here `base` is the resource to which requests are made,
+ and `collectionName` is the heroes data object in the `in-memory-data-service.ts`.
 
 <code-example 
   path="toh-pt6/src/app/hero.service.ts" 
@@ -242,8 +244,11 @@ Here is the final version of `getHeroes` with the `tap` that logs the operation.
 
 ### Get hero by id
 
-Most web APIs support a _get by id_ request in the form `api/hero/:id` 
-(such as `api/hero/11`).
+Most web APIs support a _get by id_ request in the form `:baseURL/:id`.
+
+Here, the _base URL_ is the `heroesURL` defined in the [Heroes and HTTP](http://localhost:4800/tutorial/toh-pt6#heroes-and-http) section (`api/heroes`) and _id_ is
+the number of the hero that you want to retrieve. For example, `api/heroes/11`.
+
 Add a `HeroService.getHero()` method to make that request:
 
 <code-example path="toh-pt6/src/app/hero.service.ts" region="getHero" title="src/app/hero.service.ts"></code-example>
@@ -629,6 +634,16 @@ Here are the code files discussed on this page (all in the `src/app/` folder).
   </code-pane>
 </code-tabs>
 
+{@a dashboardcomponent}
+#### _DashboardComponent_
+
+<code-tabs>
+  <code-pane 
+    title="src/app/dashboard/dashboard.component.html"
+    path="toh-pt6/src/app/dashboard/dashboard.component.html">
+  </code-pane>
+</code-tabs>
+
 {@a herosearchcomponent}
 #### _HeroSearchComponent_