How to write two-way binding in dart angular

I need a component to choose user role with two-way binding

role-chooser-comp.html

<div class="roleChooser">
  <role-item #owner (select)="role(owner.role)" [role]="'owner'" [title]="'Owner'"></role-item>
  <role-item #writer (select)="role(writer.role)" [role]="'writer'" [title]="'Writer'"></role-item>
  <role-item #viewer (select)="role(viewer.role)" [role]="'viewer'" [title]="'Reader'"></role-item>
</div>

its class is the following:

role-chooser-comp.dart

@Component(
    selector: 'role-chooser-comp',
    templateUrl: 'role_chooser_comp.html',
    styleUrls: const ['role_chooser_comp.css'],
    directives: const [RoleItem])
class RoleChooser implements OnInit {
  final PlaceService _placeService;
  final Router _router;
  final Environment _environment;

  @ViewChild('owner') RoleItem owner;
  @ViewChild('writer') RoleItem writer;
  @ViewChild('viewer') RoleItem viewer;
  List<RoleItem> choices;
  String lastSelected;

  RoleChooser(this._placeService, this._router, this._environment) {

  }

  Future<Null> ngOnInit() async {
    choices = [owner, writer, viewer];
    if (lastSelected != null)
      role(lastSelected);
  }

  String get selected => lastSelected;

  @Input()
  set selected(String role) {
    //on init, the choices are still not set
    if (choices == null)
      lastSelected = role;
    else
      this.role(role);
  }

  void role(String role) {
    if (choices == null) {
      window.alert("No roles are set");
      return;
    }

    for (RoleItem item in choices) {
      if (item.role == role) {
        item.selected = true;
        lastSelected = role;
      } else {
        item.selected = false;
      }
    }
  }
}

Now what I need is to be able to update the value of my model automatically in a use like :

usecase

<role-chooser-comp [(selected)]="userRole.roleName"></role-chooser-comp>

or

<role-chooser-comp [(ngModel)]="userRole.roleName"></role-chooser-comp>

I found an article about angular.js that show how to use [(ngModel)] with any element (implementing two methods so angular knows how to get the value from the component and backward) : https://docs.angularjs.org/guide/forms (section Implementing custom form controls (using ngModel))

I'd like to do the same in dart, but I don't know how...

The role item is very simple for now, I just paste it for reference :

role-item.html

<div class="role" [class.selected]="selected" (click)="clicked()">
      <btn #icon
          [sources]="images"></btn>
    </div>

role-item.dart

import 'package:angular2/core.dart';
import 'package:angular2/router.dart';

import 'package:share_place/environment.dart';
import 'package:share_place/place_service.dart';

import 'package:share_place/common/ui/button_comp.dart';

@Component(
    selector: 'role-item',
    templateUrl: 'role_item.html',
    styleUrls: const ['role_item.css'],
    directives: const [ButtonComp])
class RoleItem {
  final PlaceService _placeService;
  final Router _router;
  final Environment _environment;
  @Output() final EventEmitter<String> pressAction = new EventEmitter<String>();
  @Output() final EventEmitter<String> select = new EventEmitter<String>();

  get role => itemRole;

  @Input() set role(String role) {
    itemRole = role;
    images = [
      '../images/roles/$role.png',
      '../images/roles/$role-h.png',
      '../images/roles/$role-c.png'
    ];
  }

  @Input() String title;
  @Input() String desc;

  @ViewChild('icon')
  ButtonComp icon;

  String itemRole;

  List<String> images;
  bool isSelected = false;

  bool toggle = false;

  RoleItem(this._placeService, this._router, this._environment);

  void clicked() {
    bool newlySelected;
    if (!isSelected)
      newlySelected = true;

    if (toggle)
      selected = !selected;
    else
      selected = true;

    pressAction.emit(role);
    if (newlySelected)
      select.emit(role);
  }

  bool get selected => isSelected;

  void set selected(bool isSelected) {
    this.isSelected = isSelected;
    icon.select(isSelected);
  }

}