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

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.