diff --git a/aio/content/guide/displaying-data.md b/aio/content/guide/displaying-data.md index 432736bf03..c5a11d6edc 100644 --- a/aio/content/guide/displaying-data.md +++ b/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 displaying-data. +Delete the app.component.html file. It is not needed for this example. + Then modify the app.component.ts 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 ``. +The CSS `selector` in the `@Component` decorator specifies an element named ``. 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 main.ts), Angular looks for a `` +When you bootstrap with the `AppComponent` class (in main.ts), Angular looks for a `` in the `index.html`, finds it, instantiates an instance of `AppComponent`, and renders it -inside the `` tag. +inside the `` 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