Dart Example

Just another WordPress site

AngularDart v4 @Output property

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
(main.dart)
import 'package:angular/angular.dart';
import 'package:angular_forms/angular_forms.dart';
import 'memberitem_component.dart';

@Component(
  selector: 'my-app',
  template: '''
    <strong>Member List</strong>
    <ul>
      <li *ngFor="let member of members">
        <member-item [item]="member"
          (done)="removeItem(\$event)"></member-item>
      </li>
    </ul>
    ''',
  directives: const [CORE_DIRECTIVES,MemberItem]
)
class AppComponent {
  List<Member> members = [
    new Member(1,'John'),
    new Member(2,'Jessie'),
    new Member(3,'Peter'),
    new Member(4,'Erika'),
    new Member(5,'Tom'),
    new Member(6,'Betty'),
  ];
  void removeItem(id) {
    for(var i=0; i<this.members.length; i++){
      if(this.members[i].id == id){
        this.members.removeAt(i);
      }
    }
  }

}

class Member {
  int id;
  String name;
 
  Member(this.id,this.name);
}

void main() {
  bootstrap(AppComponent);
}


(memberitem_component.dart)
import 'dart:async';
import 'package:angular/angular.dart';
import 'package:angular_forms/angular_forms.dart';

@Component(
  selector: 'member-item',
  template: '''
    <span class="badge">{{item.id}}</span> {{item.name}}
    <button class="btn btn-default btn-xs"
           (click)="doneClicked()">Delete</button>
    ''',
  directives: const [CORE_DIRECTIVES]
)
class MemberItem {
  @Input() Member item;

  final _onDone = new StreamController.broadcast();
  @Output()
  Stream get done => _onDone.stream;

  void doneClicked() {
    _onDone.add(this.item.id);
  }
}

class Member {
  int id;
  String name;
 
  Member(this.id,this.name);
}