Components: mat-selection-list 2-way data binding

[SamuelMarks]

Bug, feature request, or proposal:

I'm using a mat-selection-list with mat-list-option as per your docs. From a StackOverflow answer, it seems that ngModel is usable.

What is the expected behavior?

Two way data-binding between a list of selections and what is actually selected (rendered).

What is the current behavior?

ngModel doesn't consistently reflect what is selected, and modifying what is selected in the *.component.ts has no effect on the [rendered] view.

What are the steps to reproduce?

https://stackblitz.com/edit/angular-3fffzf

What is the use-case or motivation for changing an existing behavior?

To enable various use cases.

Which versions of Angular, Material, OS, TypeScript, browsers are affected?

Tested with @angular/material version 5.2.5

Is there anything else we should know?

Been working on angular-vertical-tabs; a basic vertical tabs component that uses mat-selection-list and @angular/flex-layout.

[tinayuangao]

@SamuelMarks For me it's working as intended.
You need to set value to list options to make this work: https://stackblitz.com/edit/angular-3fffzf-p6naz3?file=app/list-selection-example.ts

[dikey94]

it does not work in v6

[CasperPas]

I'm using "@angular/material": "^6.2.1" and it only works 1-way: model changes when I interact with the list, but the list is not changed when I change model's values

[gunhansancar]

@tinayuangao It only works with a string list as a model. If you try to do your example on stacklitz with a custom class, it wouldn't work. What I mean is it doesn't reflect changes if you change selected items from code.

[thw0rted]

The comments upthread are kind of unclear. Is mat-selection-list supposed to support 2-way binding of any kind? If so, how? If not, can this ticket be changed to "please support 2-way binding", or do I need to open a new ticket for that request?

ETA: never mind. The above Stackblitz was not a good example (it read from a template var instead of a bound controller class member), but 2 way binding does already work. I forked the example to show what's actually going on, and yes, you can 2-way bind a string array with the values of the selected items.

[ophirbushi]

I don't know if it helps anyone, but it didn't work for me because I forgot to bind a [value] to the mat-list-options. Once I added the [value] it worked...

[angular-automatic-lock-bot[bot]]

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{_This action has been performed automatically by a bot._}