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