The application now has a basic title.\nNext you will create a new component to display hero information\nand place that component in the application shell.
\n For the sample app that this page describes, see the
Using the Angular CLI, generate a new component named heroes.
The CLI creates a new folder, src/app/heroes/, and generates\nthe 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\nand annotate the component class with @Component.
@Component is a decorator function that specifies the Angular metadata for the component.
The CLI generated three metadata properties:
\nselector— the component's CSS element selectortemplateUrl— the location of the component's template file.styleUrls— the location of the component's private CSS styles.The CSS element selector,\n'app-heroes', matches the name of the HTML element that identifies this component within a parent component's template.
The ngOnInit() is a lifecycle hook.\nAngular calls ngOnInit() shortly after creating a component.\nIt's a good place to put initialization logic.
Always export the component class so you can import it elsewhere ... like in the AppModule.
hero propertylinkAdd a hero property to the HeroesComponent for a hero named \"Windstorm.\"
Open the heroes.component.html template file.\nDelete the default text generated by the Angular CLI and\nreplace it with a data binding to the new hero property.
HeroesComponent viewlinkTo 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.\nSo add an <app-heroes> element to the AppComponent template file, just below the title.
Assuming that the CLI ng serve command is still running,\nthe browser should refresh and display both the application title and the hero name.
A real hero is more than a name.
\nCreate a Hero interface in its own file in the src/app folder.\nGive 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.\nInitialize 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.
\nUpdate the binding in the template to announce the hero's name\nand show both id and name in a details layout like this:
The browser refreshes and displays the hero's information.
\nModify the hero.name binding like this.\n
The browser refreshes and now the hero's name is displayed in capital letters.
\nThe word uppercase in the interpolation binding,\nright after the pipe operator ( | ),\nactivates the built-in UppercasePipe.
Pipes are a good way to format strings, currency amounts, dates and other display data.\nAngular ships with several built-in pipes and you can create your own.
\nUsers should be able to edit the hero name in an <input> textbox.
The textbox should both display the hero's name property\nand update that property as the user types.\nThat means data flows from the component class out to the screen and\nfrom the screen back to the class.
To automate that data flow, setup 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:
[(ngModel)] is Angular's two-way data binding syntax.
\nHere it binds the hero.name property to the HTML textbox so that data can flow in both directions: from the hero.name property to the textbox, and from the textbox back to the hero.name.
Notice that the app stopped working when you added [(ngModel)].
To see the error, open the browser development tools and look in the console\nfor a message like
\nAlthough ngModel is a valid Angular directive, it isn't available by default.
It belongs to the optional FormsModule and you must opt-in to using it.
Angular needs to know how the pieces of your application fit together\nand what other files and libraries the app requires.\nThis information is called metadata.
\nSome of the metadata is in the @Component decorators that you added to your component classes.\nOther critical metadata is in @NgModule decorators.
The most important @NgModule decorator annotates the top-level AppModule class.
The Angular CLI generated an AppModule class in src/app/app.module.ts when it created the project.\nThis is where you opt-in to the FormsModule.
Open AppModule (app.module.ts) and import the FormsModule symbol from the @angular/forms library.
Then add FormsModule to the @NgModule metadata's imports array, which contains a list of external modules that the app needs.
When the browser refreshes, the app should work again. You can edit the hero's name and see the changes reflected immediately in the <h2> above the textbox.
HeroesComponentlinkEvery component must be declared in exactly one NgModule.
\nYou didn't declare the HeroesComponent.\nSo why did the application work?
It worked because the Angular CLI declared HeroesComponent in the AppModule when it generated that component.
Open src/app/app.module.ts and find HeroesComponent imported near the top.\n
The HeroesComponent is declared in the @NgModule.declarations array.\n
Note that AppModule declares both application components, AppComponent and HeroesComponent.
Here are the code files discussed on this page.
\nHeroesComponent.HeroesComponent by adding it to the AppComponent shell.UppercasePipe to format the name.ngModel directive.AppModule.FormsModule in the AppModule so that Angular would recognize and apply the ngModel directive.AppModule\nand appreciated that the CLI declared it for you.