-1

I want to create a dropdown which has my mat-option with multiselect and have radio buttons on each mat-option.

The problem that I am facing is I cannot ideally click on radio buttons. On clicking on any option the radio gets selected automatically and if I select another radio option it deselects the field.

Something like this

       <mat-option
        *ngFor="let property of filteredProperties | async"
        [value]="property"
        matTooltipClass="tooltip"
        matTooltipShowDelay="5000"
        [matTooltip]="property"
        (click)="loadPropertiesDetails(property)">
        {{ property }}

        <mat-radio-group formControlName="axis">
          <mat-radio-button
            class="radiobtn"
            value="Primary"
            >P</mat-radio-button>
          <mat-radio-button
            class="radiobtn"
            value="Secondry"
            >S</mat-radio-button>
        </mat-radio-group>

      </mat-option>

enter image description here

Is there any way to achieve so ?

Shephali Srivastava
  • 1
  • There are 2 components inside the option, from the image. 1. checkbox and 2. radio. I only see the radio. How are you setting the checkbox? – Rana_S Oct 06 '22 at 12:09

1 Answers1

0

you will need to add event.stopPropagation() on the Button event. See example here. That will stop the Click event on the button from also toggling the click event on the Multiselect.

Hope this helps!

Liri22
  • 13
  • 4