CODEWITHSUNDEEP
angularangular-materialangular-material2angular6
Anil Arya
Anil Arya

Reputation: 3110

Current selected value in angular6 material mat-selection-list

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

Upvotes: 6

Views: 34625

Answers (6)

yglodt
yglodt

Reputation: 14551

In recent Angular versions you should use options:

In your template:

<mat-selection-list [multiple]="false" (selectionChange)="selChange($event)">

In your class:

public selChange(e: MatSelectionListChange) {
    let selection = e.options[0].value;
}

Upvotes: 5

Shubham Arya
Shubham Arya

Reputation: 615

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!!

Upvotes: 3

Madan Dale
Madan Dale

Reputation: 43

 <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;


  }

Upvotes: 4

Prachi
Prachi

Reputation: 3574

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);
}

Upvotes: 8

Shift &#39;n Tab
Shift &#39;n Tab

Reputation: 9443

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

Upvotes: 14

Bhanu Tej P
Bhanu Tej P

Reputation: 230

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); 
 }
}

Upvotes: 1

Related Questions