docs(aio): update displaying-data for CLI (#19574)

PR Close #19574

aio/content/guide/displaying-data.md

@@ -31,9 +31,11 @@ The easiest way to display a component property
 is to bind the property name through interpolation.
 With interpolation, you put the property name in the view template, enclosed in double curly braces: `{{myHero}}`.
 
-Follow the [setup](guide/setup) instructions for creating a new project
+Follow the [quickstart](guide/quickstart) instructions for creating a new project
 named <code>displaying-data</code>.
 
+Delete the <code>app.component.html</code> file. It is not needed for this example.
+
 Then modify the <code>app.component.ts</code> file by
 changing the template and the body of the component.
 
@@ -48,7 +50,7 @@ When you're done, it should look like this:
 
 You added two properties to the formerly empty component: `title` and `myHero`.
 
-The revised template displays the two component properties using double curly brace
+The template displays the two component properties using double curly brace
 interpolation:
 
 
@@ -92,7 +94,7 @@ the view, such as a keystroke, a timer completion, or a response to an HTTP requ
 Notice that you don't call **new** to create an instance of the `AppComponent` class.
 Angular is creating an instance for you. How?
 
-The CSS `selector` in the `@Component` decorator specifies an element named `<my-app>`.
+The CSS `selector` in the `@Component` decorator specifies an element named `<app-root>`.
 That element is a placeholder in the body of your `index.html` file:
 
 
@@ -102,9 +104,9 @@ That element is a placeholder in the body of your `index.html` file:
 
 
 
-When you bootstrap with the `AppComponent` class (in <code>main.ts</code>), Angular looks for a `<my-app>`
+When you bootstrap with the `AppComponent` class (in <code>main.ts</code>), Angular looks for a `<app-root>`
 in the `index.html`, finds it, instantiates an instance of `AppComponent`, and renders it
-inside the `<my-app>` tag.
+inside the `<app-root>` tag.
 
 Now run the app. It should display the title and hero name:
 
@@ -131,13 +133,23 @@ is simpler without the additional HTML file.
 
 In either style, the template data bindings have the same access to the component's properties.
 
+<div class="alert is-helpful">
+  
+  By default, the Angular CLI generates components with a template file. You can override that with:
+
+  <code-example hideCopy language="sh" class="code-shell">
+    ng generate component hero -it
+  </code-example>
+
+</div>
+
 
 ## Constructor or variable initialization?
 
-Although this example uses variable assignment to initialize the components, you can instead declare and initialize the properties using a constructor:
+Although this example uses variable assignment to initialize the components, you could instead declare and initialize the properties using a constructor:
 
 
-<code-example path="displaying-data/src/app/app-ctor.component.ts" linenums="false" title="src/app/app-ctor.component.ts (class)" region="class">
+<code-example path="displaying-data/src/app/app-ctor.component.ts" linenums="false" region="class">
 
 </code-example>
 
@@ -231,12 +243,16 @@ At the moment, the binding is to an array of strings.
 In real applications, most bindings are to more specialized objects.
 
 To convert this binding to use specialized objects, turn the array
-of hero names into an array of `Hero` objects. For that you'll need a `Hero` class.
+of hero names into an array of `Hero` objects. For that you'll need a `Hero` class:
 
-Create a new file in the `app` folder called  `hero.ts` with the following code:
+<code-example language="sh" class="code-shell">
+  ng generate class hero
+</code-example>
+
+With the following code:
 
 
-<code-example path="displaying-data/src/app/hero.ts" linenums="false" title="src/app/hero.ts (excerpt)">
+<code-example path="displaying-data/src/app/hero.ts" linenums="false" title="src/app/hero.ts">
 
 </code-example>