Current selected value in angular6 material mat-selection-list

Question

Working with Angular Material2 mat-selection-list, Able to identify whether current option is selected or non-selected[Boolean].

compnenent.html

<mat-selection-list #shoes (selectionChange)="onSelection($event, shoes.selectedOptions)" >
  <mat-list-option *ngFor="let shoe of typesOfShoes" [value]='shoe'>
    {{shoe}}
  </mat-list-option>
</mat-selection-list>

component.ts

export class ListSelectionExample {
  typesOfShoes = ['Boots', 'Clogs', 'Loafers', 'Moccasins', 'Sneakers'];

  onSelection(e, v){
   console.error(e.option.selected,v); 
  }
}

e.option.selected notifies whether current option is selected or non-selected.

How to identify current selected value ? Tried with multiple combinations with ngModel and ngModelChange and click , nothing works for me.

https://stackblitz.com/edit/angular-eyjdfp-qgjhvd?file=app%2Flist-selection-example.ts

Answer 1

You can get current selected value by getting e.option.value of your selectionChange $event

component.ts

current_selected: string;

onSelection(e, v){
   this.current_selected = e.option.value;
}

component.html

<p>
  Current selected value: {{ current_selected }}
</p>

Bonus

You can list all selected items by calling property selected of shoes.selectedOptions.selected in the template.

component.html

<p>Selected:</p>
<ul>
  <li *ngFor="let i of shoes.selectedOptions.selected">
    {{ i.value }}
  </li>
</ul>

Working Demo

Answer 2

Use the click event binding on the mat-list-option:

<mat-selection-list #shoes (selectionChange)="onSelection($event, shoes.selectedOptions)" >
      <mat-list-option *ngFor="let shoe of typesOfShoes" [value]='shoe' (click)="getValue($event)">
        {{shoe}}
      </mat-list-option>
</mat-selection-list>

Component TypeScript:

getValue(event){
    console.log(event.target.parentNode.innerText);
}

Answer 3

 <mat-selection-list class="addressList" #userAddressList>
          <mat-list-option *ngFor="let userAddress of userAddressesArray"
          (click)="onAddressSelection(userAddress)">
                  {{userAddress}}
                </mat-list-option>
              </mat-selection-list>
In TypeScript


  private onAddressSelection(selectedItem:any) {
   let  selectedOption = selectedItem;


  } 

Answer 4

In your component .ts :

export class ListSelectionExample {
 typesOfShoes = ['Boots', 'Clogs', 'Loafers', 'Moccasins', 'Sneakers'];

 selectedShoes;

 onSelection(e, v){
   this.selectedShoes = v.selected.map(item => item.value);

  console.error(e.option.selected,v); 
 }
}

Answer 5

I spent a good amount of time in finding a solution for this, but everything in vain... Fortunately enough I have come up with an idea for it, hope it helps.

----checkListItems is the array which consists of all the items that I want to publish----

component.html

<mat-selection-list #checkItems (selectionChange)="onSelection($event, checkItems.selectedOptions.selected)">
  <mat-list-option *ngFor="let check of checklistItems">
    {{check.label}}
  </mat-list-option>
</mat-selection-list>

In mat-selection-list I am sending an event and the value of all the selected items, so this value that I am talking about is actually an array of MatSelectionList. And I have to parse the value of my selected item in my .ts file.

component.ts

selectedOptions = [];
checkedValues = [];

onSelection(event, value) {
    this.checkedValues = [];
    this.selectedOptions = value;
    for (let i = 0; i < this.selectedOptions.length; i++) {
      this.checkedValues.push(this.selectedOptions[i]._text.nativeElement.innerText);
    }
}

So, I have an array called checkedValues, which I am deleting every time a selection or deselection is being done, as MatSelectionList array (in this case my value array) will consist of all the items that are selected. So if you won't delete it every time, it will keep on appending the same item every time it is selected. (You can try this by removing the line this.checkedValues=[] and printing the checkedValues array after for loop gets finished).

Hope this helps!!