Dart Example

Just another WordPress site

AngularDart

AngularDart v4 event

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 <2.0.0'
dependencies:
  angular: ^4.0.0
  angular_forms: ^1.0.0
  angular_router: ^1.0.2
  http: ^0.11.0
  stream_transform: ^0.0.6

dev_dependencies:
  angular_test: ^1.0.0
  browser: ^0.10.0
  dart_to_js_script_rewriter: ^1.0.1
  mockito: ^2.0.2
  test: ^0.12.21

transformers:
- angular:
    entry_points:
    - web/main.dart
    - test/**_test.dart
- test/pub_serve:
    $include: test/**_test.dart
- dart_to_js_script_rewriter

import 'package:angular/angular.dart';
import 'package:angular_forms/angular_forms.dart';

@Component(
  selector: 'my-app',
  template: '''
<strong>1)Click,mouseenter,mouseleave event demo</strong>
<button class="btn" [ngClass]="btnColor1" (click)="btnColor1='btn-success'" (mouseenter)="btnColor1='btn-primary'" (mouseleave)="btnColor1='btn-defult'">Demo1</button>  <button class="btn" [ngClass]="btnColor2" (click)="handleEvent(\$event)" (mouseenter)="handleEvent(\$event)" (mouseleave)="handleEvent(\$event)">Demo2</button><br />
<br />
<strong>2)radio(\$event object)</strong>
<form>
  <label>
    <input type="radio" value="red"
     (change)="color1=\$event.target.value" [checked]="color1=='red'">
    Red
  </label><br/>
  <label>
    <input type="radio" value="green"
     (change)="color1=\$event.target.value" [checked]="color1=='green'">
    Green
  </label><br/>
  <label>
    <input type="radio" value="blue"
     (change)="color1=\$event.target.value" [checked]="color1=='blue'">
    Blue
  </label><br/>
  <span>color1 = {{color1}}</span><br/>
</form>
<br />
<strong>3)radio(template reference variable)</strong>
<form>
  <label>
    <input #clr1 type="radio" value="red"
     (change)="color2=clr1.value" [checked]="color2=='red'">
    Red
  </label><br/>
  <label>
    <input #clr2 type="radio" value="green"
     (change)="color2=clr2.value" [checked]="color2=='green'">
    Green
  </label><br/>
  <label>
    <input #clr3 type="radio" value="blue"
     (change)="color2=clr3.value" [checked]="color2=='blue'">
    Blue
  </label><br/>
  <span>color2 = {{color2}}</span><br/>
</form>
    ''',
  directives: const [formDirectives,CORE_DIRECTIVES],
)
class AppComponent {
  String color1 = 'red';
  String color2 = 'red';
  String btnColor1 = '';
  String btnColor2 = '';
  handleEvent(event) {
    switch (event.type){
      case "mouseover":
        this.btnColor2 = "btn-primary";
        break;
      case "mouseenter":
        this.btnColor2 = "btn-primary";
        break;
      case "click":
        this.btnColor2 = "btn-success";
        break;
      default:
        this.btnColor2 = "btn-default";
        break;
    }
  }
}

void main() {
  bootstrap(AppComponent);
}