0

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.

Jett
  • 781
  • 1
  • 14
  • 30
  • 1
    Possible duplicate of [How to apply filters to \*ngFor?](https://stackoverflow.com/questions/34164413/how-to-apply-filters-to-ngfor) – Igor Mar 04 '19 at 18:57
  • I have answer something like this her https://stackoverflow.com/questions/51515695/filtering-different-columns-in-a-material-table and check the source and the preview – Muhammed Albarmavi Mar 04 '19 at 19:06

0 Answers0