Every story starts somewhere. Our story starts where the starter app ends.
First, we'll modify the app to display information about a hero. Then we'll start adding the ability to edit the hero's data.
Showing our hero
We want to display hero data in our app.
Let's add two properties to our
title property for the application name and a
for a hero named "Windstorm".
Now we update the template in the
@Component annotation with data bindings to these new properties.
The browser should refresh and display our title and hero.
The double curly braces tell our app to read the
hero properties from the component and render them.
This is the "interpolation" form of one-way data binding.
Learn more about interpolation in the Displaying Data page.
At the moment, our hero is just a name. Our hero needs more properties.
Let's convert the
hero from a literal string to a class.
Hero class with
Keep this near the top of the
app_component.dart file for now.
Now that we have a
Hero class, let’s refactor our component’s
hero property to be of type
Then initialize it with an id of
1 and the name, "Windstorm".
Because we changed the hero from a string to an object,
we update the binding in the template to refer to the hero’s
The browser refreshes and continues to display our hero’s name.
Adding more HTML
Displaying a name is good, but we want to see all of our hero’s properties.
We’ll add a
<div> for our hero’s
id property and another
<div> for our hero’s
Uh oh, our template string is getting long. We better take care of that to avoid the risk of making a typo in the template.
Multi-line template strings
We could make a more readable template with string concatenation but that gets ugly fast, it is harder to read, and it is easy to make a spelling error. Instead, let’s take advantage of the template strings feature in Dart to maintain our sanity.
Change the quotes around the template to triple quotes and
<div> elements on their own lines.
Editing our hero
We want to be able to edit the hero name in a textbox.
Refactor the hero name
<input> elements as shown below:
We see in the browser that the hero’s name does appear in the
But something doesn’t feel right.
When we change the name, we notice that our change
is not reflected in the
<h2>. We won't get the desired behavior
with a one-way binding to
We intend to display the name of the hero in the
<input>, change it,
and see those changes wherever we bind to the hero’s name.
In short, we want two-way data binding.
Let’s update the template to use the
ngModel built-in directive for two-way binding.
<input> with the following HTML
The browser refreshes. We see our hero again. We can edit the hero’s name and
see the changes reflected immediately in the
Let’s take stock of what we’ve built.
- Our Tour of Heroes uses the double curly braces of interpolation (a form of one-way data binding)
to display the application title and properties of a
- We wrote a multi-line template using Dart's template strings to make our template readable.
- We can both display and change the hero’s name after adding a two-way data binding to the
<input>element using the built-in
ngModeldirective also propagates changes to every other binding of the
Here's the complete
app_component.dart as it stands now:
Our Tour of Heroes only displays one hero and we really want to display a list of heroes. We also want to allow the user to select a hero and display their details. We’ll learn more about how to retrieve lists, bind them to the template, and allow a user to select it in the next tutorial page.