1. The hero editor
Last updated
Last updated
The application now has a basic title. Next, create a new component to display hero information and place that component in the application shell.
For the sample application that this page describes, see the / .
Use ng generate
to create a new component named heroes
.
ng generate
creates a new directory , src/app/heroes/
, and generates the three files of the HeroesComponent
along with a test file.
The HeroesComponent
class file is as follows:
You always import the Component
symbol from the Angular core library and annotate the component class with @Component
.
@Component
is a decorator function that specifies the Angular metadata for the component.
ng generate
created three metadata properties:
selector
The component's CSS element selector.
templateUrl
The location of the component's template file.
styleUrls
The location of the component's private CSS styles.
Always export
the component class so you can import
it elsewhere β¦ like in the AppModule
.
hero
propertyAdd a hero
property to the HeroesComponent
for a hero named, Windstorm
.
Open the heroes.component.html
template file. Delete the default text that ng generate
created and replace it with a data binding to the new hero
property.
HeroesComponent
viewTo display the HeroesComponent
, you must add it to the template of the shell AppComponent
.
Remember that app-heroes
is the element selector for the HeroesComponent
. Add an <app-heroes>
element to the AppComponent
template file, just below the title.
If ng serve
is still running, the browser should refresh and display both the application title and the hero's name.
Tipp von Jason:
Wenn du wie von uns vorgeschlagen Webstorm als IDE verwendest, kΓΆnnen Module mit den folgenden TastenkΓΌrzel einfach importiert werden.
Windows / Linux:
Alt + Enter
Mac:
Option + Enter
Hero
interfaceA real hero is more than a name.
Create a Hero
interface in its own file in the src/app
directory . Give it id
and name
properties.
Return to the HeroesComponent
class and import the Hero
interface.
Refactor the component's hero
property to be of type Hero
. Initialize it with an id
of 1
and the name Windstorm
.
The revised HeroesComponent
class file should look like this:
The page no longer displays properly because you changed the hero from a string to an object.
Update the binding in the template to announce the hero's name and show both id
and name
in a details display like this:
The browser refreshes and displays the hero's information.
UppercasePipe
Edit the hero.name
binding like this:
The browser refreshes and now the hero's name is displayed in capital letters.
Users should be able to edit the hero's name in an <input>
text box.
The text box should both display the hero's name
property and update that property as the user types. That means data flows from the component class out to the screen and from the screen back to the class.
To automate that data flow, set up a two-way data binding between the <input>
form element and the hero.name
property.
Refactor the details area in the HeroesComponent
template so it looks like this:
Here it binds the hero.name
property to the HTML text box so that data can flow in both directions. Data can flow from the hero.name
property to the text box and from the text box back to the hero.name
.
To see the error, open the browser development tools and look in the console for a message like
Here are the code files discussed on this page.
You used ng generate
to create a second HeroesComponent
.
You displayed the HeroesComponent
by adding it to the AppComponent
shell.
You applied the UppercasePipe
to format the name.
You learned about the AppModule
.
You learned the importance of declaring components in the AppModule
.
The , 'app-heroes'
, matches the name of the HTML element that identifies this component within a parent component's template.
The word in the interpolation binding after the pipe |
character, activates the built-in UppercasePipe
.
are a good way to format strings, currency amounts, dates, and other display data. Angular ships with several built-in pipes, and you can create your own.
[(
)]
is Angular's two-way data binding syntax.
Notice that the application stopped working when you added [(
)]
.
Although is a valid Angular directive, it isn't available by default.
It belongs to the optional and you must opt in to using it.
You used two-way data binding with the directive.
You imported the in the AppModule
so that Angular would recognize and apply the directive.