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>