CODEWITHSUNDEEP
angulartypescript
Laure
Laure

Reputation: 33

Angular - mat selection list passing value

Hi i have this code in mat selection list.

<mat-selection-list #profilesList [(ngModel)]="selectedProfiles" [multiple]="false" class="list">
<mat-list-option *ngFor="let profile of observables.profiles; last as last" [value]="profile"
     [selected]="profile.isCurrent">
      <div [ngClass]="{'list-item': true, 'selected': profile.isCurrent}">
         <label class="profileDesignation">{{profile.displayText}}</label>
       </div>
</mat-list-option>
</mat-selection-list>

and i want to acess this Profile in another Button. i have a code for the button.

<button id="selectButton" class="bottomButton" type="button" (click)="selectProfileAndApply(profilesList.selectedOptions[0])"
        matTooltip="Profile go">
</button>

i have also a method in (click) inside this method i want to access the profileList in mat selection list.

but i cannot access it. any ideas?

thanks.

Upvotes: 1

Views: 978

Answers (2)

ilkengin
ilkengin

Reputation: 301

It seems you are trying to access to selected option in a wrong way. You can access selected option via selectedOptions.selected[0]?.value not selectedOptions[0]

Since you have also bind ngModel for selectedProfiles, you can also use it to access in typescript code as below:

selectProfileAndApply(profile: Profile): void {
  console.log(this.selectedProfiles); // You can use it as you bind this object to list via ngModel
  console.log(profile); // This is the value of selectedOptions.selected[0]?.value
}

I have created a working stackblitz example here

Upvotes: 1

user13448321
user13448321

Reputation: 

selectedProfiles

As i see you are using this property for binding values from mat-selection list. You should use it for button

Upvotes: 0

Related Questions