I am working with AG/IG ~12.3.

Users want to compare a list of scenarios with a dynamic length and several controls are necessary for each. The basics of it are the scenario type (to filter the list of scenarios down) and the scenarios list (for users to pick from). There is also a checkbox that, when checked, will also produce a start date dropdown for the scenario data.

Users will generally want to compare between 10 and 35 scenarios. The only thing I've found that comes close to adding these controls dynamically is this syncfusion article (with stackblitz example), but it's for Angular 8 and doesn't include multiple fields or how to handle the data within them.

I assume the methodology would utilize an object array similar to the below:

{ type:string, scenario:scenario, stitch:boolean, start:workweek }[]

I'm just unsure how to put it all together and have data actually work the way I expect.

I am using the input-group/dropdown method for creating the dropdown rather than the combo/singleSelection method and my basic input group looks like the below (taken from a component with 2 static input groups):

                    <div class="controls">
                        <igx-input-group #s1TypeGroup [igxToggleAction]="s1TypeDd" displayDensity="compact">
                            <igx-prefix style="width: 90px;">&nbsp;Is Type: </igx-prefix>
                            <input #s1TypeInput style="width: 65px;" type="text" igxInput [igxDropDownItemNavigation]="s1TypeDd" readonly="true" [(ngModel)]="scenario1Type" [value]="s1TypeDd.selectedItem?.value" (keydown.ArrowDown)="openDropDown('s1Type')" />
                            <igx-suffix igxButton="icon" class="dropdownToggleButton" igxRipple>
                                <igx-icon>arrow_drop{{ s1TypeDd.collapsed ? '_down' : '_up' }}</igx-icon>
                            </igx-suffix>
                        </igx-input-group>
                        <igx-drop-down #s1TypeDd displayDensity="compact" (selectionChanging)="filterScenarios($event, 1)">
                            <div class="scrollable">
                                <igx-drop-down-item [selected]="true" [value]="'ALL'">ALL</igx-drop-down-item>
                                <igx-drop-down-item *ngFor="let type of scenarioTypes" [value]="type.name">{{type.name}}</igx-drop-down-item>
                            </div>
                        </igx-drop-down>
                        <igx-input-group #scenario1Group [igxToggleAction]="scenario1Dd" displayDensity="compact">
                            <igx-prefix style="width: 100px;">&nbsp;Is Scenario: </igx-prefix>
                            <input #scenario1Input style="width: 210px;" type="text" igxInput [igxDropDownItemNavigation]="scenario1Dd" readonly="true" placeholder="Later Horizon Start" [value]="scenario1Dd.selectedItem?.value" (keydown.ArrowDown)="openDropDown('scenario1')" />
                            <igx-suffix igxButton="icon" class="dropdownToggleButton" igxRipple>
                                <igx-icon>arrow_drop{{ scenario1Dd.collapsed ? '_down' : '_up' }}</igx-icon>
                            </igx-suffix>
                        </igx-input-group>
                        <igx-drop-down #scenario1Dd displayDensity="compact" (selectionChanging)="setScenario($event, 1)">
                            <div class="scrollable">
                                <igx-drop-down-item [selected]="true" [value]="">Choose a Scenario</igx-drop-down-item>
                                <igx-drop-down-item *ngFor="let scen of scenario1List" [value]="scen.name">{{scen.name}}</igx-drop-down-item>
                            </div>
                        </igx-drop-down>
                        <igx-checkbox [(ngModel)]="scenario1Stitch" (click)="match(1)">Stitch</igx-checkbox>
                        <div class="controls" *ngIf="scenarioWorkweeks !== undefined && scenarioWorkweeks !== [] && actualWorkweeks !== undefined && actualWorkweeks !== [] && actualStartWw !== undefined && actualStartWw !== dummyWw && scen2StartWw !== undefined && scen2StartWw !== dummyWw && endWw !== undefined && endWw !== dummyWw && scenario1 !== undefined && scenario1.name !== scenario2.name && scenario1Stitch">
                            <igx-input-group #scen1StartGroup [igxToggleAction]="scen1StartDd" displayDensity="compact">
                                <igx-prefix style="width: 87px;">&nbsp;Is Start:</igx-prefix>
                                <input #scen1StartInput style="width: 55px;" type="text" igxInput [igxDropDownItemNavigation]="scen1StartDd" readonly="true" [(ngModel)]="scen1StartWw.name" placeholder="Is Scen Start WW..." [value]="scen1StartDd.selectedItem?.value" (keydown.ArrowDown)="openDropDown('scen1Start')"/>
                                <igx-suffix igxButton="icon" class="dropdownToggleButton" igxRipple>
                                    <igx-icon>arrow_drop{{ scen1StartDd.collapsed ? '_down' : '_up' }}</igx-icon>
                                </igx-suffix>
                            </igx-input-group>
                            <igx-drop-down #scen1StartDd displayDensity="compact" (selectionChanging)="setValue($event, 'scen1Start')">
                                <div class="scrollable">
                                    <igx-drop-down-item *ngFor="let ww of scenarioWorkweeks | slice:scen1Span.start:scen1Span.end" [selected]="ww.name === scen1StartWw.name" [value]="ww.name">{{ww.name}}</igx-drop-down-item>
                                </div>
                            </igx-drop-down>
                        </div>
                    </div>

"Controls" refers to keeping these items inline, as each control group should be to reduce real estate waste:

.controls {
    display: inline-flex;
    width: 100%;
}

setScenario/setValue (scenario/start dropdowns) is merely allocating the value of the dropdown changed to a parameter in the component for further processing.

match (checkbox) checks if the other scenario is the same and accordingly sets both checkboxes to the new selection.

My main concern is that I'm using @ViewChild for each dropdown as a means for accessing their values and unsure how to do so dynamically for an unknown number of each dropdown. The Type dropdowns can all be populated from the same list. The Scenario dropdowns can all be populated from a single list. Even the Start dropdown can be populated from a single list (using the slice pipe in my example). Without being able to access that data, though, I cannot produce the data grid and charts associated with the selections.

I think a basic example showing the first dropdown as a filter to the second and a final output that shows the chosen Type and Scenario (name) at the end would give me what I need.

For reference, the Scenario object has a name, type, start, end, and audit info (user created, created date, last user modified, last modified date) and IDs for everything (unnecessary for example). The Type object is just a name and ID. The workweek object includes a name, week number, year, month, quarter, and time period (ex: 04/03/2022 00:00:0000-04/09/2022 23:59:9999) with ID.

Thanks in advance.