I have some code that disables the checkbox depending on the drop down selection. I now also want to force uncheck depending on selection from drop down.
html:
<ng-container matColumnDef="permissions">
<th mat-header-cell class="text-center" *matHeaderCellDef>Permissions</th>
<td mat-cell *matCellDef="let p" class="text-center">
<mat-select [formControl]="p.item.permissionsControl">
<mat-option [value]="permissionOptions.NoAccess">No Access</mat-option>
<mat-option [value]="permissionOptions.ReadOnly">Read Only</mat-option>
<mat-option [value]="permissionOptions.Modify">Modify</mat-option>
<mat-option [value]="permissionOptions.Confirm">Confirm</mat-option>
<mat-option [value]="permissionOptions.Full">Full</mat-option>
</mat-select>
</td>
</ng-container>
<ng-container matColumnDef="canConfirmOwnChanges">
<th mat-header-cell class="text-center" *matHeaderCellDef>Can Confirm Own Changes</th>
<td mat-cell *matCellDef="let p" class="text-center">
<span *ngIf="p.item.permissionsControl.value == permissionOptions.Confirm || p.item.permissionsControl.value == permissionOptions.Full">
<mat-checkbox [disabled]="false" [formControl]="p.item.canConfirmOwnChangesControl"></mat-checkbox>
</span>
<span *ngIf="p.item.permissionsControl.value == permissionOptions.NoAccess || p.item.permissionsControl.value == permissionOptions.ReadOnly || p.item.permissionsControl.value == permissionOptions.Modify">
<mat-checkbox [disabled]="true" [formControl]="p.item.canConfirmOwnChangesControl"></mat-checkbox>
</span>
</td>
</ng-container>
Adding [checked]="false" does not work here.
Any advice would be greatly appreciated!
I managed to achieve this by subscribing to valueChanges on the FormControl for the dropdown and then enable / disable and set the value on the checkbox FormControl
Related
I have this column definition
<ng-container matColumnDef="filePath">
<th mat-header-cell *matHeaderCellDef mat-sort-header>Fichero</th>
<td mat-cell *matCellDef="let element" [matTooltip]="pp" class="cursor-mano">
{{element.filePath}}
</td>
</ng-container>
But when I hover over the cells no tooltip is shown
Any idea, please?
Thanks
I need to create dynamically my calendar class to represent sometimes the first fortnight of the month and other times the second. So once my class has this properties
Other this one
So I bind this class to the template like this
<mat-table [dataSource]="dataSource">
<ng-container matColumnDef="{{this.columnsToDisplay[2]}}">
<th mat-header-cell *matHeaderCellDef mat-sort-header>{{this.columnsToDisplay[2]}}</th>
<td mat-cell *matCellDef="let element; let i=index">
<mat-form-field class="form-input">
<input type="number" matInput [(ngModel)]="quincenaUrl==1?element.dia1:element.dia16"
(keyup.enter)="editarCelda2($event, i, this.columnsToDisplay[2])" />
</mat-form-field>
</td>
</ng-container>
But this
[(ngModel)]="quincenaUrl==1?element.dia1:element.dia16"
Only works in case quincena==2
That is When I edit this cell the dataSource is updated with that value
But when I select the first fortnight
Tha value edited in the template is not updated in the dataSource binded
Any idea, please?
Thanks
I'm using Angular Material Table to show some date on my page. What I want to do is to modify the received data, what I get from backend is 3 different letters, A: answered, Y: yes, N: no. I want to show these as different color icons in the table not just letters, like A is a green tick and N is red x mark. How can I format it to show the icons and not the letters?
here's my code:
<div class="mat-elevation-z8">
<mat-card>
<ng-container matColumnDef="answer">
<th mat-header-cell *matHeaderCellDef mat-sort-header>
<h3>Answered</h3>
</th>
<td mat-cell *matCellDef="let element"> {{element.answer}} </td>
</ng-container>
<tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
<tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
</table>
<!-- (page)="onPaginate($event)" -->
<mat-paginator [length]="length" [pageSizeOptions]="[5, 10, 15, 20]" showFirstLastButtons [pageSize]="pageSize || defaultPageSize">
</mat-paginator>
</mat-card>
</div>
you can use *ngIf in your cell to display whatever HTML you want:
<td mat-cell *matCellDef="let element">
<img *ngIf="element.answer === 'A'" src="...">
<div *ngIf="element.answer === 'B'">the answer is B</div>
<mat-icon *ngIf="element.answer === 'C'">home</mat-icon>
</td>
I am trying to enable multi selection options with dynamic columns. Though dynamic columns are working multi selection is not working.
Regards
jcm
<mat-table [dataSource]="dataSource" matSort="matSort">
<ng-container [matColumnDef]="col.columnDef" *ngFor=" let col of displayColumns">
<th mat-header-cell *matHeaderCellDef mat-sort-header>
{{ col.header }}
<ng-container [matColumnDef]="select">
<th mat-header-cell *matHeaderCellDef>
<mat-checkbox #checkbox (change)="$event ? masterToggle() : null" [disabled]="isDisabled" [checked]="selectionTable.hasValue() && isAllSelected()"
[indeterminate]="selectionTable.hasValue() &&
!isAllSelected()"></mat-checkbox>
</th>
</ng-container>
</th>
<td mat-cell *matCellDef="let element ">{{ element[col.columnDef] }}</td>
<td mat-cell *matCellDef="let row">
<mat-checkbox (click)="$event.stopPropagation()" (change)="$event ? selectionTable.toggle(row) : null" [checked]="selectionTable.isSelected(row)"></mat-checkbox>
</td>
</ng-container>
<tr mat-header-row *matHeaderRowDef="columnDefs"></tr>
<tr mat-row *matRowDef="let row; columns: columnDefs; "></tr>
</mat-table>
You have to add a header to displayColumns for the multi-select column, and when you running over them using *ngFor, you have to check using *ngIf whether you are in the first header (which belongs to the multi-select column) or in the other headers (which belongs to the dynamic columns), and create the header and column respectively.
You can see an example I made in stackblitz.
I can't get a select menu to work in a jquery mobile app, and thought I'd post the problem here, but I can't even get the thing to display properly in fiddle. Thought I'd solve the fiddle problem first.
Here is my fiddle, which contains the following code:
html
<div data-role='content'>
<table class='my-tables'>
<caption style='text-align: left;'>Table A</caption>
<thead>
<TR>
<TH align='left'>Type</TH>
<TH align='left'>Amount</TH>
<th colspan='4' scope='col'>
<label for='selmenu'></label>
<select id='selmenu' class='sel' data-native-menu='false' style='width: 100px'>
<option class='type1' value='type1'>type1</option>
<option class='type2' value='type2'>type2</option>
<option class='type3' value='type3'>type3</option>
<option class='type4' value='type4'>type4</option>
</select>
</TR>
<TR>
<TH align=l eft>Cars</TH>
<TD>5,000</TD>
<TD class='exhaust type1'>7000</TD>
<TD class='exhaust type2'>6000</TD>
<TD class='exhaust type3'>5000</TD>
<TD class='exhaust type4'>4000</TD>
</TR>
<TR>
<TH align=l eft>Trucks</TH>
<TD>45672</TD>
<TD class='exhaust type1'>154</TD>
<TD class='exhaust type2'>1.1</TD>
<TD class='exhaust type3'>3.7</TD>
<TD class='exhaust type4'>55.2</TD>
</TR>
<TH align=l eft>Motorcycles</TH>
<TD>224455</TD>
<TD class='exhaust type1'>88</TD>
<TD class='exhaust type2'>99</TD>
<TD class='exhaust type3'>77</TD>
<TD class='exhaust type4'>55</TD>
</TR>
</TABLE>
<div data-role='footer'>
<h4>my footer</h4>
</div>
<!-- /footer -->
jquery
$(document).ready(function () {
$('.exhaust').hide();
$('.type1').show();
$('.sel').change(function () {
$('.exhaust').hide();
$('.' + this.value).show();
$('.sel').val(this.value);
});
});
Why won't my fiddle even display the jqm styles? I researched similar problems in stackoverflow, found this question on the same thing, but my fiddle page doesn't show the options that are available in the example given in that question.
What am I missing?
Two things:
Use jQuery 1.8.3 library. Included external resource JQM 1.2.0 will not work with later versions.
Load external resources with HTTPS:
https://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.css
https://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js
After that, your fiddle should work.
UPDATE:
Besides all above, once you choose jQuery 1.8.3 version, fiddle will offer you JQM library below the framework selection menu. So, no need for including external files.