[Fixed] How to deactivate mat-select event?

Issue

Because I have a mat-select more as a table, I need to deactivate the event which is fired when a row is clicked.

I need to can check only checkboxes without to fire the selection on the column.

Example: If you see Qty row with a shadowed background, there I clicked on the checkbox from the AVG column. Due of the "row event", the Qty will be auto selected. When I press another checkbox (for SUM or AVG columns), the Qty will be fired again and will toggle it.

Some code which can help:

<mat-select  [formControl]="selectedMeasure" multiple>
  <mat-option disabled>
    <div class="option-measure">
      <span>Column</span>
      <span>SUM</span>
      <span>AVG</span>
      <span>COUNT</span>
      <span>DISTINCT</span>
    </div>
  </mat-option>
  <mat-option *ngFor="let measure of measureCols" [value]="measure">
    <div class="option-measure">
       <span>{{measure.name}}</span>
       <div>
         <mat-checkbox [(ngModel)]="measure.actionCode" value="sum"></mat-checkbox>
         <mat-checkbox [(ngModel)]="measure.actionCode" value="avg"></mat-checkbox>
         <mat-checkbox [(ngModel)]="measure.actionCode" value="count"></mat-checkbox>
         <mat-checkbox [(ngModel)]="measure.actionCode" value="distinct"></mat-checkbox>
       </div>
    </div>
  </mat-option>
</mat-select>

I removed css classes to make the code more readable.

I know the [(ngModel)] from selections is not ok because this will override the values, but not this is the point of the problem right now.

How the select event can be fired only on the first column, and not on the entire row? Or … can it to be done using a select dropdown? Because, if not, I’ll need to transform it from a mat-select to an popup with a table.

thanks

Solution

thanks @prashant for your answer. Unfortunatelly this not working. But, I found another solution, I’m not sure if this will produce html validation warnings because I use unspecific tags inside a select:

<mat-select #measureSelect [formControl]="selectedMeasure" 
   class="select-btn" multiple 
   placeholder="Add">
   <div class="option-measure" fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="0">
      <span class="col-header">Column</span>
      <span class="header">SUM</span>
      <span class="header">AVG</span>
      <span class="header">COUNT</span>
      <span class="header">COUNT DISTINCT</span>
   </div>
   <div *ngFor="let measure of measures"
       class="option-measure" 
       fxLayout="row" 
       fxLayoutAlign="start center" 
       fxLayoutGap="0">
       <mat-option [value]="measure"
           class="option-measure__label">
           {{measure.label}}
       </mat-option>
    ...
</mat-select>