35 lines
		
	
	
		
			705 B
		
	
	
	
		
			TypeScript
		
	
	
	
	
	
			
		
		
	
	
			35 lines
		
	
	
		
			705 B
		
	
	
	
		
			TypeScript
		
	
	
	
	
	
| // #docplaster
 | |
| // #docregion final
 | |
| // #docregion imports
 | |
| import {Component} from 'angular2/core';
 | |
| // #enddocregion imports
 | |
| import {Hero} from './hero'
 | |
| 
 | |
| @Component({
 | |
|   selector: 'my-app',
 | |
|   template: `
 | |
|   <h1>{{title}}</h1>
 | |
|   <h2>My favorite hero is: {{myHero.name}}</h2>
 | |
|   <p>Heroes:</p>
 | |
|   <ul>
 | |
|     <li *ngFor="#hero of heroes">
 | |
|       {{ hero.name }}
 | |
|       </li>
 | |
|   </ul>
 | |
|   // #docregion message
 | |
|   <p *ngIf="heroes.length > 3">There are many heroes!</p>
 | |
|   // #enddocregion message
 | |
| `
 | |
| })
 | |
| 
 | |
| export class AppComponent {
 | |
|   title = 'Tour of Heroes';
 | |
|   heroes = [
 | |
|     new Hero(1, 'Windstorm'),
 | |
|     new Hero(13, 'Bombasto'),
 | |
|     new Hero(15, 'Magneta'),
 | |
|     new Hero(20, 'Tornado')
 | |
|   ];
 | |
|   myHero = this.heroes[0];
 | |
| }
 |