How do I get the value from a MdListOption element?

user_4763776 0
Viewed 3062

I'm having a lot of difficulty trying to use Angular Material, specifically with regards to the Selection List. I am displaying a list of objects in a Angular Material Selection List and I want to get the objects from the list of selected items.

This is what I have so far, but [value]="row" just gives me true when I call rows.selectedOptions.selected[0].value:

submit(rows) {
    console.log(rows);
    console.log(rows.selectedOptions.selected[0].value);
    console.log(rows.selectedOptions.selected[0]._getHostElement().innerText); // ugly hack, but at least it gives me the text of the option
}
<md-selection-list #rows dense>
  <md-list-option *ngFor="let row of config.data" [value]="row">
    {{row.title}}
  </md-list-option>
</md-selection-list>

<div class="d-flex justify-content-end">
  <div class="p-2">
    <button md-button (click)="submit(rows)">
      <span>Submit</span>
      <md-icon aria-label="submit">arrow_forward</md-icon>
    </button>
  </div>
</div>

How can I get the actual row from the list of selected options?

angular-material2 angular
4 Answers

you could handle it with something like:

in your component.ts:

rows: Array<string> = []; //explicitly define and init property here

toggleRow(value:string){
    if(this.rows.indexOf(value) !== -1){
      this.rows.splice(this.rows.indexOf(value), 1);
    }else{
      this.rows.push(value);    
    }
}
submit(rows) {
  console.log(rows);
}

and your component.html:

<md-selection-list #rows dense>
  <md-list-option *ngFor="let row of config.data" (click)="toggleRow(row.title)">
    {{row.title}}
  </md-list-option>
</md-selection-list>

<div class="d-flex justify-content-end">
  <div class="p-2">
    <button md-button (click)="submit(rows)">
      <span>Submit</span>
      <md-icon aria-label="submit">arrow_forward</md-icon>
    </button>
  </div>
</div>

you could also use an Array<any> or similar and .push() the entire row object into your rows array (instead of just the .title)...

user_6386060

I've had the same problem with not being able to extract value from MdListOption. I ended up using the workaround that kind of defeats the purpose, but still:

<md-selection-list #rows dense>
  <md-list-option *ngFor="let row of config.data" (click)="clickedOnRow(row)">
    {{row.title}}
  </md-list-option>
</md-selection-list>

and then keeping track of my selections in the clickedOnRow() in the component.

user_29686750

I've had the same problem in angular 5 .I ended up using SelectionModel and bind a click event

<mat-selection-list #AnswerableBaseline>
     <mat-list-option *ngFor="let a of dataSourceForAnswerable" (click)="onAnswerableBaselineListClicked(a)" checkboxPosition="before">
     </mat-list-option>
</mat-selection-list>

ts file

selectionBaseline   = new SelectionModel<Your Type>(true, []);
onAnswerableBaselineListClicked(row: any) {        
    if (!this.selectionBaseline.isSelected(row)) {
        this.selectionBaseline.select(row);
    }
    else {
        this.selectionBaseline.deselect(row);
    }

}
user_17767850
Related