AngularDart v4 ng-switch

wp-admin

8 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';
import 'package:angular_forms/angular_forms.dart';

class Member {
  String name;
  int age;
  String address;

  Member(this.name,this.age,this.address);
}

@Component(
  selector: 'my-app',
  template: '''
<strong>NgSwitch Demo</strong><br />
<input type="button" value="List" (click)="sw='list'">
<input type="button" value="Table" (click)="sw='table'">
  <br />
<div [ngSwitch]="sw">
  <div *ngSwitchCase="'table'">
    <table class="table">
      <thead>
        <tr><th>Name</th><th>Age</th><th>Address</th></tr>
      </thead>
      <tbody>
        <tr *ngFor="let member of members;">
          <td>{{member.name}}</td>
          <td>{{member.age}}</td>
          <td>{{member.address}}</td>
        </tr>
      </tbody>
    </table>
  </div>
  <div *ngSwitchCase="'list'">
    <ul>
      <li *ngFor="let member of members;">{{member.name}} ({{member.age}}) {{member.address}}</li>
    </ul>
  </div>
  <div *ngSwitchDefault>
    <p>Data:ngSwitchDefault</p>
  </div>
</div>
    ''',
  directives: const [formDirectives,CORE_DIRECTIVES]
)
class AppComponent {
  List<Member> members = [
    new Member('John',20,'1st Ave Seattle WA'),
    new Member('Jessie',55,'2nd Ave Seattle WA'),
    new Member('Peter',20,'Mercer St Seattle WA'),
    new Member('Erika',37,'Alaskan Way Seattle WA'),
    new Member('Tom',25,'Abcd St Seattle WA'),
    new Member('Richard',72,'Xyza Way Seattle WA')
  ];
  String sw = "default";
}

void main() {
  bootstrap(AppComponent);
}