Angular5: Dependant dropdown using template variable

Question

In one of my component I'm subscribing to an observable. The underlying JSON object I'm subscribing to has many levels of nesting.

How can I make several dropdown select dependant on the previous selection? I'm using template variables to mark the selects.

this._exposureService.listAllExposures
  .subscribe(
    res => {
      this.allExposureData = res;
    }
  )
;

res is of the following structure (for illustrating purposes)

res: [
{
    companyId: 1,
    reportDates: [
        {
            reportDate: 12/31/2017,
            currencies: [
                {
                    currency: 'USD'
                }, ...
            ]
        }, ...
    ]
}, ...

]

The idea is that in the ngFor directive I want to leverage the template variables of the selects. E.g. like below..., I doesnt work for me, I'm getting blank selects.. Is this possible?

Kind regards

<mat-form-field>
  <mat-select #company>
    <mat-option *ngFor="let exp of allExposureData" [value]="exp">{{exp.companyId}}</mat-option>
  </mat-select>
</mat-form-field>


<mat-form-field>
  <mat-select #reportDate>
    <mat-option *ngFor="let date of company.reportDates" [value]="date">{{dates.reportDate}}</mat-option>
  </mat-select>
</mat-form-field>


<mat-form-field>
  <mat-select #currency>
    <mat-option *ngFor="let ccy of reportDate.currencies" [value]="ccy">{{ccy.currency}}</mat-option>
  </mat-select>
</mat-form-field>

Answer 1

Here is one way to handle this: use a Subject!

Check out an example I created (the work is in the dropdown.ts file)

https://plnkr.co/edit/Ouz1OzKl2v7Kpk6Mxoep?p=preview