<mat-option*ngFor="let field of tableFieldsDef[page.pageId][table.tableId].allowedColumns"[value]="field"[disabled]="(table.columnSelectionSM.length<=1&&table.columnSelectionSM.includes(field))||(table.columnSelectionSM.length>= 3 && !table.columnSelectionSM.includes(field))">
{{field | camelcaseWithReplace:'_'}}
</mat-option>
</mat-select>
<mat-hint>Columns (mobile) should be between 1 and 3</mat-hint>
<mat-hint>Columnselected (mobile) should be between 1 and 3</mat-hint>
<mat-option*ngFor="let field of tableFieldsDef[page.pageId][table.tableId].allowedColumns"[value]="field"[disabled]="(table.columnSelection.length<=2&&table.columnSelection.includes(field))||(table.columnSelection.length>= tableFieldsDef[page.pageId][table.tableId].maxColumns && !table.columnSelection.includes(field))">
{{field | camelcaseWithReplace:'_'}}
</mat-option>
</mat-select>
<mat-hint>Column selection should be between 2 and {{tableFieldsDef[page.pageId][table.tableId].maxColumns}}</mat-hint>
<mat-hint>Number of column selected should be between 2 and {{tableFieldsDef[page.pageId][table.tableId].maxColumns}}</mat-hint>
</mat-form-field>
<buttonmat-icon-buttoncolor="primary"type="button"tabindex="7"(click)="onTableReset(page.pageId,table)"matTooltip="Reset to Default"><mat-icon>restore</mat-icon></button>