` 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.
+
+
+ By default, the Angular CLI generates components with a template file. You can override that with:
+
+
+ ng generate component hero -it
+
+
+
+
## 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:
-
+
@@ -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:
+
+ ng generate class hero
+
+
+With the following code:
-
+
diff --git a/aio/content/images/guide/displaying-data/final.png b/aio/content/images/guide/displaying-data/final.png
index 767ab1a50e..25146f2988 100644
Binary files a/aio/content/images/guide/displaying-data/final.png and b/aio/content/images/guide/displaying-data/final.png differ
diff --git a/aio/content/images/guide/displaying-data/hero-names-list.png b/aio/content/images/guide/displaying-data/hero-names-list.png
index 2fe8eb5d77..84f4c74b35 100644
Binary files a/aio/content/images/guide/displaying-data/hero-names-list.png and b/aio/content/images/guide/displaying-data/hero-names-list.png differ
diff --git a/aio/content/images/guide/displaying-data/title-and-hero.png b/aio/content/images/guide/displaying-data/title-and-hero.png
index 505c6add56..0762ff2b0a 100644
Binary files a/aio/content/images/guide/displaying-data/title-and-hero.png and b/aio/content/images/guide/displaying-data/title-and-hero.png differ