Selection in Angular Dart material dropdown select gives error

Issue

I have a component with a material dropdown select and when the [(selection)] is of type SingleSelectionModel I got an error “angular dart Expected a value of type ‘SingleSelectionModel’, but got one of type ‘Term'”. When it’s of type Term it’s fine.
I need SingleSelectionModel to access its changes stream and to do some operations with the selected value.

I have Dart 2.2.0, angular: ^5.2.0, angular_components: ^0.11.0.

Can anybody help how to use SingleSelectionModel for [(selection)]?

@Component(
  selector: 'x-plan-edit-rule',
  template: '''
    <material-dropdown-select
        [options]="terms"
        [(selection)]="selectedTerm"
        [buttonText]="buttonText">
    </material-dropdown-select>
  ''',
  directives: const [
    coreDirectives,
    MaterialButtonComponent,
    MaterialDropdownSelectComponent,
  ],
)
class EditPlanRuleComponent implements OnInit {

  @Input() Rule rule;
  SelectionOptions<Term> terms;
  SingleSelectionModel<Term> selectedTerm = SelectionModel<Term>.single(); // GIVES ERROR
  //Term selectedTerm; // WORKS FINE WITHOUT ERROR

  EditPlanRuleComponent();

  @override
  ngOnInit() {
    // List<Term> rule.availableTerms
    terms = SelectionOptions.fromList(rule.availableTerms);
    selectedTerm?.selectionChanges?.listen((_) {
      // do some checks after the selection change
    });
  }


  String get buttonText =>  'Some button text';
}

Solution

Finally I found a solution

I’ve split template binding [()] to [] and () so the template is

  template: '''
    <material-dropdown-select
        [options]="terms"
        [selection]="selectedTerm"
        (selectionChange)="validateTerm($event)"
        [buttonText]="buttonText">
    </material-dropdown-select>
  ''',

In Dart file I have a method validateTerm(Term term) which does some validation checks and assings selected term to selectedTerm. So I don’t need to monitor selection changes stream.

 Term selectedTerm;

 void validateTerm(Term term) {
    // do some validations...
    selectedTerm = term;
  }

Answered By – Martin Edlman

Answer Checked By – Senaida (FlutterFixes Volunteer)