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