AngularDart v4 @Input property

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

@Component(
  selector: 'my-sub',
  template: '''
<h4>{{name}}</h4>
<ul>
  <li *ngFor="let item of logs">
    {{item["id"]}}=>{{item["msg"]}}
  </li>
</ul>
<button (click)="addlog('Sample log by ' + name)">Write a log</button>
    ''',
  directives: const [CORE_DIRECTIVES]
)
class MySub {
  @Input('subName') String name;
  List logs = [
    {"id": 0, "msg": 'initial'}
  ];
  int logCount = 0;
  void addlog(String msg) {
    this.logs.add({
      "id": ++this.logCount,
      "msg": msg
    });
  }
}

@Component(
  selector: 'my-app',
  template: '''
<button (click)="open('Sub-A')">Sub-A</button>
<button (click)="open('Sub-B')">Sub-B</button>
<div [ngSwitch]="tab">
  <div *ngSwitchCase="'Sub-A'">
    <my-sub [subName]="'Sub-A'"></my-sub>
  </div>
  <div *ngSwitchCase="'Sub-B'">
    <my-sub [subName]="'Sub-B'"></my-sub>
  </div>
</div>
    ''',
  directives: const [CORE_DIRECTIVES,MySub]
)
class AppComponent {
  String tab = 'Sub-A';
  void open(String tab) {
    this.tab = tab;
  }
}

void main() {
  bootstrap(AppComponent);
}