Angular project from basics

Create a new project

1.create a folder in local and navigate to the folder

2.Run the CLI command ng new and provide the name angular-tour-of-heroes, as shown here:

ng new angular-tour-of-heroes

3.say yes to the routeing.

4.navigate to the project you have created 

5. open in vscode for this use command code .

Create a component

ng generate component heroes

inside component write this code

export class HeroesComponent implements OnInit { hero: Hero = { id: 1, name: 'Windstorm' }; constructor() { } ngOnInit() { } }

Show the hero object in html

<h3>{{hero.name}} Details</h3> <div><span>id: </span>{{hero.id}}</div> <div><span>name: </span>{{hero.name}}</div>

<h2>{{hero.name | uppercase}} Details</h2>

uppercase is a pipe operator ( | ),

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.