I am fairly new to angular and I created a webpage where I have a dropdown arrow, textbox for input value and a table. The table has a select column. Now based off which dropdown value the user picks. It will decide if the select column of the table uses a radio button or if it uses checkboxes. Based of which input value the user inputs in the textbox, this will decide which table comes up.
So for the most part my code works but I have a weird bug. I created to table elements to hold table data that I bind to the data source and pass to the table. So based on which dropdown value the user picks, sometimes it shows table 1 and sometimes it should table 2.
I use an *ng if statement to decide which dropdown value shows the checkbox or radio button in the table select column. FYI the dropdown values match table columns.
My bug is the code works on whatever you choose for the first drop down value. And whenever you choose a dropdown value that causes you switch between tables. So I know the if statement works cause it will switch properly between the checkbox and the radio button.
But for some reason if you pick a drop down value and choose a input value that chooses a value that keeps the same table on the screen (Not switch between table). If that drop down value column should switch the select column between a radio button to checkbox or vice versa, it will not change the select column. But if I keep the same drop down value or pick another drop down value and put in a input value that switches tables, it will work.
Any ideas what might be causes this bug?
Some code snippets below of the HTML code.
<code>
<mat-form-field class="searchSelect">
<mat-label>Search Type</mat-label>
<!-- <select matNativeControl required>-->
<mat-select #dropValue [(value)]="selected">
<mat-option value="Dummy_IN">GMIN</mat-option>
<mat-option value="Dummy_ID">GMID</mat-option>
<mat-option value="Full_Name">Full_Name</mat-option>
</mat-select>
<!-- </select>-->
</mat-form-field>
<mat-form-field class="searchInput">
<input #inPutValue matInput placeholder={{selected}}>
</mat-form-field>
<mat-dialog-actions>
<button (click)="runSearch(inPutValue.value,dropValue.value)" class="mat-raised-button">Search</button>
</mat-dialog-actions>
</div>
</code>
<code>
<div class="example-table-container">
<table mat-table [dataSource]="dataSource" class="mat-elevation-z8">
<ng-container matColumnDef="Select">
<div *ngIf="dropValue.value === 'Dummy_IN' || dropValue.value === 'Dummy_ID'; else checkBlock">
<mat-radio-group >
<th mat-header-cell *matHeaderCellDef>
</th>
<td mat-cell *matCellDef="let row">
<mat-radio-button name="1" [value]="row" (click)="rbClick(row)"></mat-radio-button>
</td>
</mat-radio-group>
</div>
<ng-template #checkBlock>
<!--Checkbox-->
<th mat-header-cell *matHeaderCellDef>
</th>
<td mat-cell *matCellDef="let row">
<mat-checkbox (click)="$event.stopPropagation()"
(change)="$event ? selection.toggle(row) : null"
[checked]="selection.isSelected(row)"
[aria-label]="checkboxLabel(row)">
</mat-checkbox>
</td>
</ng-template>
</ng-container>
</code>
Table Data In Typescript
<code>
TABLE_DATA: TableElement[] = [
{Dummy_IN: '12345', Dummy_ID: 'Test1', Full_Name: 'John Doe', Preferred_Name: 'John', Active_Flag: 'N', Last_Login_Date: "2020-10-10"},
];
PTABLE_DATA2: TableElement[] = [
{Dummy_IN: '56789', Dummy_ID: 'Test2', Full_Name: 'Jane Doe', Preferred_Name: 'Jane', Active_Flag: 'Y', Last_Login_Date: '2020-10-12'},
];
</code>
So for the most part my code works but I have a weird bug. I created to table elements to hold table data that I bind to the data source and pass to the table. So based on which dropdown value the user picks, sometimes it shows table 1 and sometimes it should table 2.
I use an *ng if statement to decide which dropdown value shows the checkbox or radio button in the table select column. FYI the dropdown values match table columns.
My bug is the code works on whatever you choose for the first drop down value. And whenever you choose a dropdown value that causes you switch between tables. So I know the if statement works cause it will switch properly between the checkbox and the radio button.
But for some reason if you pick a drop down value and choose a input value that chooses a value that keeps the same table on the screen (Not switch between table). If that drop down value column should switch the select column between a radio button to checkbox or vice versa, it will not change the select column. But if I keep the same drop down value or pick another drop down value and put in a input value that switches tables, it will work.
Any ideas what might be causes this bug?
Some code snippets below of the HTML code.
<code>
<mat-form-field class="searchSelect">
<mat-label>Search Type</mat-label>
<!-- <select matNativeControl required>-->
<mat-select #dropValue [(value)]="selected">
<mat-option value="Dummy_IN">GMIN</mat-option>
<mat-option value="Dummy_ID">GMID</mat-option>
<mat-option value="Full_Name">Full_Name</mat-option>
</mat-select>
<!-- </select>-->
</mat-form-field>
<mat-form-field class="searchInput">
<input #inPutValue matInput placeholder={{selected}}>
</mat-form-field>
<mat-dialog-actions>
<button (click)="runSearch(inPutValue.value,dropValue.value)" class="mat-raised-button">Search</button>
</mat-dialog-actions>
</div>
</code>
<code>
<div class="example-table-container">
<table mat-table [dataSource]="dataSource" class="mat-elevation-z8">
<ng-container matColumnDef="Select">
<div *ngIf="dropValue.value === 'Dummy_IN' || dropValue.value === 'Dummy_ID'; else checkBlock">
<mat-radio-group >
<th mat-header-cell *matHeaderCellDef>
</th>
<td mat-cell *matCellDef="let row">
<mat-radio-button name="1" [value]="row" (click)="rbClick(row)"></mat-radio-button>
</td>
</mat-radio-group>
</div>
<ng-template #checkBlock>
<!--Checkbox-->
<th mat-header-cell *matHeaderCellDef>
</th>
<td mat-cell *matCellDef="let row">
<mat-checkbox (click)="$event.stopPropagation()"
(change)="$event ? selection.toggle(row) : null"
[checked]="selection.isSelected(row)"
[aria-label]="checkboxLabel(row)">
</mat-checkbox>
</td>
</ng-template>
</ng-container>
</code>
Table Data In Typescript
<code>
TABLE_DATA: TableElement[] = [
{Dummy_IN: '12345', Dummy_ID: 'Test1', Full_Name: 'John Doe', Preferred_Name: 'John', Active_Flag: 'N', Last_Login_Date: "2020-10-10"},
];
PTABLE_DATA2: TableElement[] = [
{Dummy_IN: '56789', Dummy_ID: 'Test2', Full_Name: 'Jane Doe', Preferred_Name: 'Jane', Active_Flag: 'Y', Last_Login_Date: '2020-10-12'},
];
</code>
Facebook
Twitter