Angular mat-selection-list not working as expected with search input

2
votes

Working on angular5 project where I am using angular material selection list which is not working as expected with input text search at top.

Here is code on stackblitz. https://stackblitz.com/edit/angular-i3pfu2-xgembc

Steps :

  1. Select from list say "Sneakers" and "Moccasins"
  2. Search with text say "clo"
  3. Delete text from input box.
  4. See selection list, previously selected option deselects automatically which should not happen.

How we can retain previously selected option in list? Thanks in advance.

1
angularangular-material2
you can use two table one for display data and another for the selected item. – Steve Ruben
how two table will be used in same place – Anil Kumar Arya
you can simply add value to the second array when it has been selected. sorry i use table instead of array in the last post. – Steve Ruben
Could you share your solution for this? – Nxt3

1 Answers

5
votes

You can simply expand your typesOfShoes string array to be an object array with the selected property in there and handle the logic yourself.

typesOfShoes = [{name:'Boots',selected:false}, {name:'Clogs',selected:false}, {name:'Loafers',selected:false}, {name:'Moccasins',selected:false}, {name:'Sneakers',selected:false}];

I don't know how the material mat-selection-list component works but i'm sure you know how to use the (click) directive to change shoe.selected: (shoe.selected = !show.selected)

edit

For completeness:

<mat-selection-list #shoes>
  <mat-list-option *ngFor="let shoe of typesOfShoes  | LockFilter: query" [value]="shoe" (click)="shoe.selected = !shoe.selected" [selected]="shoe.selected">
    {{shoe.name}}
  </mat-list-option> 
</mat-selection-list>