How to get `material-dropdown-select` to show current model value

Issue

Using AngularDart + Angular Components

I need to create a dropdown that is populated with a small list of items (got this to work), and gets automatically set to the current selection for an object in the model (haven’t got this to work).

I have an array of strings in the component called types. There is a model object (selected) whose field (type) corresponds to the list in types.

<form class="form">
   //other stuff
   <material-dropdown-select>
     <material-select-item *ngFor="let type of types" [selected] = "selected.type == type">
        {{type}}
     </material-select-item>
   </material-dropdown-select>
</form>

Despite the [selected] attribute, this doesn’t sync the current value selected.type to the dropdown’s default value. What am I doing wrong here?

Thanks in advance.

EDIT

Interestinglt even in this state the dropdown doesn’t work as expected – i select a value from the dropdown and nothing happens.

Solution

The best place to see how widgets are used is probably going to be the angular_components_examples. For material-dropdown-select you can see the see the examples here

In particular for this bracket syntax [] in angular only propagates a value down, not up. So if you want to get an update on a value you would need to use parenthesis (). Or the special syntax [()].

Since this is a form I’d also suggest using the ControlValueAccessor to get the value in the form automatically:

<form class="form">
   //other stuff
   <material-dropdown-select [(ngModel)]="selected.type">
     <material-select-item *ngFor="let type of types" [selected] = "selected.type == type">
        {{type}}
     </material-select-item>
   </material-dropdown-select>
</form>

you’ll also need to add DropdownSelectValueAccessor to your directives list.

Answered By – Ted Sander

Answer Checked By – Marie Seifert (FlutterFixes Admin)