The Hero Editor 4.0
In this part of the tutorial, you’ll modify the starter app to display
information about a hero. Then you’ll add the ability to edit the hero’s data.
When you’re done, the app should look like this
Where you left off
Before you start writing code, let’s verify that you have the following structure. If not, you’ll need to go back and follow the setup instructions on the previous page.
Show the hero
Add two properties to the
title property for the app name and a
for a hero named “Windstorm.”
Now update the template in the
@Component annotation with data bindings to these new properties.
Refresh the browser, and the page displays the title and hero name.
The double curly braces are Angular’s interpolation binding syntax.
These interpolation bindings present the component’s
hero property values,
as strings, inside the HTML header tags.
Read more about interpolation in the Displaying Data page.
Create a Hero class
The hero needs more properties.
hero from a literal string to a class.
Hero class with
Add these properties near the top of the
app_component.dart file, just below the import statement.
AppComponent class, refactor the component’s
hero property to be of type
then initialize it with an
1 and the name
Because you changed the hero from a string to an object,
update the binding in the template to refer to the hero’s
Refresh the browser, and the page continues to display the hero’s name.
Add multi-line template HTML
To show all of the hero’s properties,
<div> for the hero’s
id property and another
<div> for the hero’s
To keep the template readable, place each
<div> on its own line.
Enable editing the hero name
Users should be able to edit the hero name in an
The textbox should both display the hero’s
and update that property as the user types.
You need a two-way binding between the
<input> form element and the
Use a two-way binding
Refactor the hero name in the template so it looks like this:
[(ngModel)] is the Angular syntax to bind the
to the textbox.
Data flows in both directions: from the property to the textbox,
and from the textbox back to the property.
Declare non-core directives
Unfortunately, immediately after this change, the app breaks!
Template parse error
If you refresh the browser, the app won’t load.
To know why, look at the
pub serve output. The template
compiler doesn’t recognize
ngModel, and issues a parse error for
Error running TemplateGenerator for forms|lib/src/hero_form_component.dart. Error: Template parse errors: Can't bind to 'ngModel' since it isn't a known native property or known directive. Please fix typo or add to directives list. [(ngModel)]="hero.name" ^^^^^^^^^^^^^^^^^^^^^^^
Update the pubspec
angular_forms library comes in its own package. Add the package to the pubspec dependencies:
+ angular_forms: ^1.0.0
Update @Component(directives: …)
NgModel is a valid Angular directive defined in the angular_forms
library, it isn’t available by default.
Before you can use any Angular directives in a template,
you need to list them in the
directives argument of your component’s
@Component annotation. You can add directives individually, or for
convenience you can add the formDirectives list
(note the new import statement):
Refresh the browser and the app should work again.
You can edit the hero’s name and see the changes reflected immediately in the
<h2> above the textbox.
The road you’ve travelled
Take stock of what you’ve built.
- The Tour of Heroes app uses the double curly braces of interpolation (a type of one-way data binding)
to display the app title and properties of a
- You wrote a multi-line template using Dart’s template strings to make the template readable.
- You added a two-way data binding to the
<input>element using the built-in
ngModeldirective. This binding both displays the hero’s name and allows users to change it.
- You added formDirectives to the
directivesargument of the app’s
@Componentannotation so that Angular knows where
Your app should look like this
Here’s the complete
app_component.dart as it stands now:
The road ahead
In the next tutorial page, you’ll build on the Tour of Heroes app to display a list of heroes. You’ll also allow the user to select heroes and display their details. You’ll learn more about how to retrieve lists and bind them to the template.