fix issues related to tutorial - #24445

We're already in that file, because we just did the import, so this

In the HeroesComponent class (in the same file), define a component property called heroes to expose the HEROES array for binding.

Would it also work to add text recommended by PR 19715, such as: "It is common practice to keep all public properties together. For this tutorial, define the heroes property between the existing title and hero properties."

Or have we already said something like that earlier in the tutorial?

Since we normally isolate properties when displaying how they are added, I don't think its going to make a difference here. In the final code review, the properties should be grouped together.

I like that you're trying to include lots of context, but this feels like an odd ending. It's not the end of the class definition, but it also maybe more than needed below the heroes= line. Maybe just these 3 lines. And does the coding style allow for closing up some blank lines?

export class HeroesComponent implements OnInit {
heroes = HEROES;
selectedHero: Hero;

I think the only thing that needs to be displayed here is the export line, the heroes line and the closing curly braces. The selectedHero isn't mentioned until later in this section.

export class HeroesComponent implements OnInit {
  heroes = HEROES;
}

You will have to remove some of the blank lines in the example file so there isn't so much space in between areas.

Add . at end of sentence

Initial cap for each bullet

• A css file...

Good. Two minor changes.

• I would move "(such as api/heroes/11)" to be after this second paragraph.
• Minor editorial: "Here, the base URL is the heroesURL defined in the Heroes and HTTP section (api/heroes), and the id is the id number of the hero that you want to retrieve. For example, api/heroes/11.

I recommend beginning with why this method is here. Then keep description of what it returns.

"Overrides the genId method to ensure that a Hero always has an id."

Also add a line break above line 21

Editorial recommendation:

// 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 max number of ids plus 1.

I would clarify to say it returns the highest hero id plus + 1

Can we show the app.module.ts file here? Or is that too distracting?

Minimally please add app.module.ts to the final code review, so all files changed in this tutorial section are listed, even if they are changed by the CLI and not manually. Thx.

Added app.module.ts to the final code review.

I think the only thing that needs to be displayed here is the export line, the heroes line and the closing curly braces. The selectedHero isn't mentioned until later in this section.

export class HeroesComponent implements OnInit {
  heroes = HEROES;
}

You will have to remove some of the blank lines in the example file so there isn't so much space in between areas.

The description for the test spec file is missing

We say four files are generated, but only list three below. The test spec file is the other file.

Also add a line break above line 21

I would clarify to say it returns the highest hero id plus + 1

Earlier in the file on line 61, it says Add the HttpClientInMemoryWebApiModule to the @NgModule.imports array— after importing the HttpClient

HttpClient should be HttpClientModule

Since we normally isolate properties when displaying how they are added, I don't think its going to make a difference here. In the final code review, the properties should be grouped together.

Couple of small fixes to this sentence;

If the heroes array is not empty, the method below returns the highest

if -> If the
heighest -> highest