Scribd
Upload
16 views6 pages

Angular - The Hero Editor

The document describes creating a HeroesComponent in Angular to display hero information. It generates the component, adds a hero property, displays the hero's name and details, and formats the name with a pipe. The component is then added to the AppComponent template.

Uploaded by

Babu Sharath
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
16 views6 pages

Angular - The Hero Editor

The document describes creating a HeroesComponent in Angular to display hero information. It generates the component, adds a hero property, displays the hero's name and details, and formats the name with a pipe. The component is then added to the AppComponent template.

Uploaded by

Babu Sharath
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 6

The hero editor

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

live example / download example.

Create the heroes component


Use ng generate to create a new component named heroes .

ng generate component heroes

ng generate creates a new directory , src∕app∕heroes∕ , and

generates the three �les of the HeroesComponent along with a test �le.

The HeroesComponent class �le is as follows:


app/heroes/heroes.component.ts (initial version)

{ } '@angular∕core';

@Component({
selector: 'app-heroes',
templateUrl: '.∕heroes.component.html',
styleUrls: ['.∕heroes.component.css']
})
{
}

You always import the Component symbol from the Angular core library

and annotate the component class with @Component .

@Component is a decorator function that speci�es the Angular

metadata for the component.

ng generate created three metadata properties:

PROPERTIES DETAILS

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.

The CSS element selector , 'app-heroes' , matches the name of the

HTML element that identi�es this component within a parent

component's template.

Always export the component class so you can import it elsewhere

… like in the AppModule .


Add a property
Add a hero property to the HeroesComponent for a hero named,

Windstorm .

heroes.component.ts (hero property)

hero = 'Windstorm';

Show the hero


Open the heroes.component.html template �le. Delete the default

text that ng generate created and replace it with a data binding to the

new hero property.

heroes.component.html

{{hero}}

Show the view


To 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 �le, just below the title.

src/app/app.component.html

{{title}}

If ng serve is still running, the browser should refresh and display both
the application title and the hero's name.

Create a interface
A real hero is more than a name.

Create a Hero interface in its own �le in the src∕app directory . Give it

id and name properties.

src/app/hero.ts

{
id: number;
name: ;
}

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 �le should look like this:


src/app/heroes/heroes.component.ts

{ } '@angular∕core';
{ } '..∕hero';

@Component({
selector: 'app-heroes',
templateUrl: '.∕heroes.component.html',
styleUrls: ['.∕heroes.component.css']
})
{
hero: = {
id: 1,
name: 'Windstorm'
};
}

The page no longer displays properly because you changed the hero

from a string to an object.

Show the hero 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:

heroes.component.html (HeroesComponent template)

{{hero.name}} Details
id: {{hero.id}}
name: {{hero.name}}

The browser refreshes and displays the hero's information.

Format with the


Edit the hero.name binding like this:

src/app/heroes/heroes.component.html

{{hero.name | uppercase}} Details

The browser refreshes and now the hero's name is displayed in capital

letters.

The word uppercase in the interpolation binding after the pipe |

character, activates the built-in UppercasePipe .

Pipes 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.

You might also like