| 
									
										
										
										
											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
										 |  |  | 
 | 
					
						
							|  |  |  | final List<Hero> _heroes = [ | 
					
						
							|  |  |  |   new Hero(1, 'Windstorm'), | 
					
						
							|  |  |  |   new Hero(13, 'Bombasto'), | 
					
						
							|  |  |  |   new Hero(15, 'Magneta'), | 
					
						
							|  |  |  |   new Hero(20, 'Tornado') | 
					
						
							|  |  |  | ]; | 
					
						
							|  |  |  | 
 | 
					
						
							|  |  |  | @Component( | 
					
						
							|  |  |  |     selector: 'my-app', | 
					
						
							|  |  |  |     template: '''
 | 
					
						
							|  |  |  | <h1>{{title}}</h1> | 
					
						
							|  |  |  | <h2>My favorite hero is: {{myHero.name}}</h2> | 
					
						
							|  |  |  | <p>Heroes:</p> | 
					
						
							|  |  |  | <ul> | 
					
						
							| 
									
										
										
										
											2016-04-30 07:01:16 -07:00
										 |  |  |   <li *ngFor="let hero of heroes"> | 
					
						
							| 
									
										
										
										
											2015-12-01 23:01:36 -07:00
										 |  |  |     {{ hero.name }} | 
					
						
							|  |  |  |   </li> | 
					
						
							|  |  |  | </ul> | 
					
						
							| 
									
										
										
										
											2016-01-07 15:11:44 -08:00
										 |  |  | // #docregion message
 | 
					
						
							| 
									
										
										
										
											2015-12-01 23:01:36 -07:00
										 |  |  | <p *ngIf="heroes.length > 3">There are many heroes!</p> | 
					
						
							| 
									
										
										
										
											2016-01-07 15:11:44 -08:00
										 |  |  | // #enddocregion message
 | 
					
						
							| 
									
										
										
										
											2015-12-01 23:01:36 -07:00
										 |  |  | ''')
 | 
					
						
							|  |  |  | class AppComponent { | 
					
						
							|  |  |  |   String title = 'Tour of Heroes'; | 
					
						
							|  |  |  |   List<Hero> heroes = _heroes; | 
					
						
							|  |  |  |   Hero myHero = _heroes[0]; | 
					
						
							|  |  |  | } |