Components: MatListOption ngModel for boolean

[Tails128]

Bug, feature request, or proposal:

Proposal

What is the expected behavior?

Upon setting an [(ngModel)] with a boolean value, the mat-list-option should update the boolean value not only for the end user, but for the model too.

What is the current behavior?

[(ngModel)] simply doesn't bind.

What are the steps to reproduce?

https://goo.gl/95YrK5

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

I'm implementing a setting list which I'm including in a modal.
It'd be nice to be able to pre-select some settings and directly updating them on click without writing a function explicitly for it since the webapp changes its behaviour only once the settings are saved and the modal's closed.

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

Angular: any
Material: 5.0.1
OS: any
TypeScript: 2.4.2
Browsers: any

Is there anything else we should know?

Nope

[devversion]

From reading the issue, it looks like you want to place a NgModel on top of options?

If you are using forms with the MatSelectionList, the [(ngModel)] needs to be placed on the mat-selection-list element, not on an option.

e.g.

<mat-selection-list [(ngModel)]="['test']">
  <mat-list-option value="test">Test</mat-list-option>
  <mat-list-option value="test2">Test 2</mat-list-option>
</mat-selection-list>

[Tails128]

Yeah, i want to place an NgModelon top of options for the following reasons:

1. The options I have have multiple fields like: Title, BooleanValue, Hover, Description, and to create a parallel boolean array is not exactly the best solution considering i should implement a function that is called every time a value in said array changes just to pair my existing array of options and the boolean array.

2. The way they are used is as a filter over a search and the reason why they need to be dynamic and code-independent is that the administrator of the webpage may add search tags for the users (E.G: currently the tags are: ["meals"], in the future they may be: ["meals", "vegetarian", "main courses"]), so hardcoding would mean every time he writes a new article he'd have to call me to add the new tag to the filter list.

The final html/angular code should look like this:

<mat-selection-list>
    <mat-list-option *ngFor="let option of options" [(ngModel)]="option.BooleanValue">
         {{option.Title}}
    </mat-list-option>
</mat-selection-list>

[julianobrasil]

@Tails128, AFAIK, MatListOption does not implement ValueAccessor interface. Your best option for now is what @DevVersion wrote above along with the parallel function to control selections as you said (you can use @Output selectionChange property to trigger your function).

Also you can use the [value] attribute to preselect the chosen options in the option panel: https://stackblitz.com/edit/angular-selection-list-previous-chosen

[Tails128]

@julianobrasil Currently I've adopted a mat-list containing mat-list-items with mat-slide-toggle inside, like this:

<mat-list role = "list" *ngFor = "let setting of settings">
    <mat-list-item role = "listitem">
        <mat-slide-toggle [(ngModel)] = setting.BooleanValue>
            {{setting.Title}}
        </mat-slide-toggle>
    </mat-list-item>
</mat-list>

althought another solution could be a properly stiled mat-list with mat-list-items containing mat-checkboxes which are simpler and cleaner solutions compared to the parallel function...

The point I wanted to highlight is that it feels really odd to have a component made precisely for yes/no list items which needs workarounds in order to work with complex objects.

[anirbanmu]

I also came to this issue trying to figure out how to bind my view model's boolean property to the state of the checkbox. I will switch to using actual checkboxes.