AngularDart v4 Sample Code,Demo
- AngularDart : 4.0.0
- Dart : 1.24.1
Loading…
(html) <head> ..... <script defer src="main.dart" type="application/dart"></script> <script defer src="packages/browser/dart.js"></script> </head> <body> <my-app>Loading...</my-app> </body> (pubspec.yaml) ..... environment: sdk: '>=1.24.0
import 'package:angular/angular.dart';
class Member {
String name;
int age;
String address;
Member(this.name,this.age,this.address);
}
@Component(
selector: 'my-app',
template: '''
<strong>1)Simple Table</strong><br />
<table class="table">
<thead>
<tr><th>Name</th><th>Age</th></tr>
</thead>
<tbody>
<tr *ngFor="let member of members">
<td>{{member.name}}</td>
<td>{{member.age}}</td>
</tr>
</tbody>
</table>
<br />
<strong>2)Template input variables index,odd</strong><br />
<table class="table">
<thead>
<tr><th>No.</th><th>Name</th><th>Age</th></tr>
</thead>
<tbody>
<tr *ngFor="let member of members; let idx = index; let odd = odd;"
[ngClass] = "odd ? 'bg-success' : 'bg-warning'">
<td>{{idx + 1}}</td>
<td>{{member.name}}</td>
<td>{{member.age}}</td>
</tr>
</tbody>
</table>
''',
directives: const [CORE_DIRECTIVES]
)
class AppComponent {
List<Member> members = [
new Member('John',20,'1st Ave Seattle WA'),
..........
];
}
void main() {
bootstrap(AppComponent);
}