Skip to content

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

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Closed
wants to merge 1 commit into from
Closed
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
36 changes: 26 additions & 10 deletions aio/content/guide/displaying-data.md
Original file line number Diff line number Diff line change
Expand Up @@ -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.

Expand All @@ -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:


Expand Down Expand Up @@ -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:


Expand All @@ -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:

Expand All @@ -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>

Expand Down Expand Up @@ -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:

<code-example language="sh" class="code-shell">
ng generate class hero
</code-example>

Create a new file in the `app` folder called `hero.ts` with the following code:
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>

Expand Down
Binary file modified aio/content/images/guide/displaying-data/final.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file modified aio/content/images/guide/displaying-data/hero-names-list.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file modified aio/content/images/guide/displaying-data/title-and-hero.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.