| 
									
										
										
										
											2016-01-07 15:11:44 -08:00
										 |  |  | // #docregion
 | 
					
						
							| 
									
										
										
										
											2016-03-25 16:03:53 -07:00
										 |  |  | import 'package:angular2/core.dart'; | 
					
						
							| 
									
										
										
										
											2016-01-07 15:11:44 -08:00
										 |  |  | 
 | 
					
						
							|  |  |  | import 'hero.dart'; | 
					
						
							| 
									
										
										
										
											2015-12-01 23:01:36 -07:00
										 |  |  | 
 | 
					
						
							|  |  |  | @Component( | 
					
						
							|  |  |  |     selector: 'my-app', | 
					
						
							|  |  |  |     template: '''
 | 
					
						
							| 
									
										
										
										
											2016-07-07 14:00:19 -07:00
										 |  |  |       <h1>{{title}}</h1> | 
					
						
							|  |  |  |       <h2>My favorite hero is: {{myHero.name}}</h2> | 
					
						
							|  |  |  |       <p>Heroes:</p> | 
					
						
							|  |  |  |       <ul> | 
					
						
							|  |  |  |         <li *ngFor="let hero of heroes"> | 
					
						
							|  |  |  |           {{ hero.name }} | 
					
						
							|  |  |  |         </li> | 
					
						
							|  |  |  |       </ul> | 
					
						
							|  |  |  |       // #docregion message
 | 
					
						
							|  |  |  |       <p *ngIf="heroes.length > 3">There are many heroes!</p> | 
					
						
							|  |  |  |       // #enddocregion message
 | 
					
						
							|  |  |  |     ''')
 | 
					
						
							| 
									
										
										
										
											2015-12-01 23:01:36 -07:00
										 |  |  | class AppComponent { | 
					
						
							|  |  |  |   String title = 'Tour of Heroes'; | 
					
						
							| 
									
										
										
										
											2016-07-07 14:00:19 -07:00
										 |  |  |   List<Hero> heroes = [ | 
					
						
							|  |  |  |     new Hero(1, 'Windstorm'), | 
					
						
							|  |  |  |     new Hero(13, 'Bombasto'), | 
					
						
							|  |  |  |     new Hero(15, 'Magneta'), | 
					
						
							|  |  |  |     new Hero(20, 'Tornado') | 
					
						
							|  |  |  |   ]; | 
					
						
							|  |  |  |   Hero get myHero => heroes.first; | 
					
						
							| 
									
										
										
										
											2015-12-01 23:01:36 -07:00
										 |  |  | } |