AngularDart v4 ng-for

wp-admin

7 years ago

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);
}