I am very new to Angular and currently, using Angular to display data in my AG-Grid. My table that I am displaying looks a little something like this:
ColA ColB
[Dropdown for ColA Values] [Dropdown for ColB Values]
Table:
ColA ColB ColC ColD
Values Values Values Values
Values Values Values Values
My html code for these two dropdowns are currently:
<mat-form-field fxFlex="15" fxFlexOffset="1">
<mat-select placeholder="ColumnA" [(ngModel)]="tableAMain.colA" (change)="ontableAChanged()">
<mat-option *ngFor="let colA of colAs" [value]="colA">
{{colA}}
</mat-option>
</mat-select>
</mat-form-field>
<mat-form-field fxFlex="15" fxFlexOffset="5">
<mat-select placeholder="ColumnB" [(ngModel)]="tableAMain.colB" (change)="ontableAChanged()">
<mat-option *ngFor="let colB of colBs" [value]="colA">
{{colB}}
</mat-option>
</mat-select>
</mat-form-field>
Currently, the two dropdowns are independent - meaning, let's say in my database, there is no row with the values:
ColA ColB ColC ColD
ValueE ValueF ValueG ValueH
So if I select "Value E" from my ColA Dropdown, I do not want to see "ValueF" as an option in ColB Dropdown because no such row exists anyway. At the moment, I can select ValueE and still see ValueF from the ColB Dropdown list. I would like ColB's Dropdown values to be dependent on my first selection on ColA.
My table only populates with data if there exists at least one row that satisfies both conditions of ColA's Dropdown and ColB's Dropdown.
The SQL statement that I am using to retrieve ColA and ColB is:
select ColA, ColB, EDITABLE
from TableA
GROUP BY ColA, ColB, EDITABLE
ORDER BY lower(ColA) ASC
I have tried using a cross join on my SQL statement but I am not sure if that is the right approach.
Would greatly appreciate any tips or help.
Edit: Filtering different columns in a material table
Although closely linked and a great answer imho, I think the question marked as 'Best Answer' filters the table itself, where as I am more interested in the dropdown menus containing the column values. I think the answer there is great for filtering the actual table itself but I am not quite satisfied with its answer pertaining to my question.