In one terminal session:

npm install
npm run tsc

In another terminal session:

npm start

Then open http://localhost:3000

• Add some heroes
• Click on some heroes
• Edit the names of some heroes

Create a new component that will show the number of Heroes in the upper right-hand corner.

Create a new component. In app/app.ts, below line 3, add the following:

@Component({
  selector: 'counter',
  template: `{{heroes.length}}`,
  properties: ['heroes']
})
class CountComponent {
  public heroes: Hero[]
}

Tell the AppComponent about the new component by changing the directives line to:

directives: [FORM_DIRECTIVES, CORE_DIRECTIVES, CountComponent],

Use the new component. In public/partials/heroes.html replace the comment with:

<counter [heroes]="heroes"></counter>

Experiment how ViewEncapsulation options change the markup. Options are:

• None
• Emulated
• Native

With each change, add and remove the @import url(/bootstrap/dist/css/bootstrap.min.css); line.

http://blog.thoughtram.io/angular/2015/06/29/shadow-dom-strategies-in-angular2.html

Look at better alternatives:

• React
• Ember

• http://victorsavkin.com/post/119943127151/angular-2-template-syntax
• https://blogs.windows.com/msedgedev/2015/07/14/bringing-componentization-to-the-web-an-overview-of-web-components/#javascript-and-scopes

• Add the ability to persist edits to the server (requires server + client changes)
  • BONUS: prevent the sidebar from updating when you change the text in the edit field
• Add the ability to delete Heroes