How to use material-dropdown-select in angular dart

Question

I am looking for a sample how to use the material-dropdown-select component.

What I have is a variable holding the currently selected item and a list with all possible items. What I managed to do is to display the dropdown component and fill the available items.

  <material-dropdown-select>
    <material-select-item *ngFor="let item of allItems">
      {{item.name}}
    </material-select-item>
  </material-dropdown-select>

What I did not manage is to automatically mark the currently selected item and to add an event handler to update the selection. In that case it would be necessary to not update the variable itself but to run a method which in my case triggers a redux state transition.

Answer 1

From the angular_components_example:

<material-select width="2" class="bordered-list">
  <material-select-item *ngFor="let p of ['FTP', 'HTTP', 'HTTPS']"
                        (trigger)="protocol = p"
                        [selected]="protocol == p">
    {{ p }}
  </material-select-item>
</material-select>

You could also use a model class instead, which gives more flexibility:

<material-select [selection]="targetLanguageSelection" class="bordered-list">
  <material-select-item *ngFor="let language of languages"
                        [value]="language"
                        displayNameRenderer
                        useCheckMarks="true">
  </material-select-item>
</material-select>

Let me know if that helps!