Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

mat-selection-list 2-way data binding

See original GitHub issue

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.

Issue Analytics

State:
Created 5 years ago
Comments:7 (1 by maintainers)

Top GitHub Comments

2reactions

ophirbushicommented, Apr 1, 2019

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…

2reactions

dikey94commented, May 16, 2018

it does not work in v6

Top Results From Across the Web

Two way data binding for multiple mat-selection-list

I have list of groups coming from a service and creating multiple selection list for all the groups. Each group has a list...

Two-way Data Binding in Angular 2 (v 11) - TutorialsTeacher

Two-way data binding performs the following actions: Sets a property of a component class; Listens for a DOM element change event. Angular v2+...

Angular binding ngModel for a Multi Selection List input - Reddit

The two-way-binding syntax is essentially a combination of property-binding and event-binding: <mat-selection-list ...

Two way data binding for multiple mat-selection-list

I have list of groups coming from a service and creating multiple selection list for all the groups. Each group has a list...

Two-way binding - Angular

Listens for an element change event. Adding two-way data bindinglink. Angular's two-way binding syntax is a combination of square brackets and parentheses, [()] ......