app/app.component.ts – It is the root component of what will become a tree of nested components as the application evolves.

app/app.module.ts – the root module that tells Angular how to assemble the application.

main.ts – The recommended place to bootstrap a JIT-compiled browser application is in a separate file in the src folder named src/main.ts



git clone quickstart 
cd quickstart
npm install
npm start

@Component decorator’s templateUrl property

Interpolation {{ … }}

<p>My current hero is {{}}</p>

Template expression

JavaScript expression that have or promote side effects are prohibited, includes :

  • assignments (=+=-=, …)
  • new
  • chaining expressions with ; or ,
  • increment and decrement operators (++ and --)

The pipe operator

<div>Title through uppercase pipe: {{title | uppercase}}</div>

The safe navigation operator (?.) and null property path

The Angular safe navigation operator (?.) is a more fluent and convenient way to guard against nulls in property paths. The expression bails out when it hits the first null value. The display is blank, but the app keeps rolling without errors.

The current hero's name is {{currentHero?.name}}


<hero-detail *ngIf="isActive"></hero-detail>


<div *ngFor="let hero of heroes">{{}}</div>

NgFor is a repeater directive — a way to present a list of items. You define a block of HTML that defines how a single item should be displayed. You tell Angular to use that block as a template for rendering each item in the list.


“let hero from heroes” – Take each hero in the heroes array, store it in the local hero looping variable, and make it available to the templated HTML for each iteration.

create class

export class Hero {
    public id: number,
    public name: string) { }
  • Declares a constructor parameter and its type.
  • Declares a public property of the same name.
  • Initializes that property with the corresponding argument when creating an instance of the class.