How do I create a custom list component, allowing child formatting to pass through with loop variable in AngularDart? - angular-dart

Question

I want to create a custom list component (vertical-list) in angular dart so that I can utilise a list and pass through individual items, but also offer additional functionality such as removeItem and reorder list:
<vertical-list [for]="let item of myList" remove order>
<a [routerLink]="item.url()">{{item.title}}</a>
</vertical-list>
I'm not sure how to approach this. I started writing the code below, until I realised I was out of my depth.
#Component(
selector: 'vertical-list',
template: '''<table>
<caption *ngIf="caption != null">{{caption}}</caption>
<tr *ngFor="let item of list">
<td *ngIf="order"><button [class.hidden]="item == list.first" (click)="moveUp(item)">^</button></td>
<td><content></content></td>
<td *ngIf="remove"><button (click)="removeItem(item)">X</button></td>
</tr>
</table>''',
directives: [
coreDirectives
]
)
class VerticalList<T> {
#Input() String caption;
#Input('for') List<T> list;
#Input() bool order;
#Input() bool remove;
void moveUp(T item) {
final index = list.indexOf(item);
list.remove(item);
list.insert(index-1, item);
}
void removeItem(T item) => list.remove(item);
}
I appear to need some way to create an iterator and pass it through to the child, but have access in the parent.
Thanks.