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:
- 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