Dependent DropDown Angular

Issue

i`m creating dynamic dropdown box i have 2 dropdown each of my dropdown have a different data once i selected it it will channge the other data depending on what you select in the first dropdown how to achieve that?

i tried this code but it gaves me a undentified

.TS 

this is what iwanted to put in my dropdown box once i click the SERVICEABLE it will populate all the maintenance,upgrage,repairable and once i click the UNSERVICEABLE it will change it to another data and list all unserviceable

[
  {
    "id": 1,
    "assetID": 9,
    "tranType": "MAINTENANCE",
    "assetConditionType": {
      "id": 9,
      "assetConditionType": "SERVICEABLE"
    }
  },
  {
    "id": 2,
    "assetID": 9,
    "tranType": "UPGRADE",
    "assetConditionType": {
      "id": 9,
      "assetConditionType": "SERVICEABLE"
    }
  },
  {
    "id": 3,
    "assetID": 9,
    "tranType": "REPAIRABLE",
    "assetConditionType": {
      "id": 9,
      "assetConditionType": "SERVICEABLE"
    }
  },
  {
    "id": 4,
    "assetID": 10,
    "tranType": "DISPOSAL",
    "assetConditionType": {
      "id": 10,
      "assetConditionType": "UNSERVICEABLE"
    }
  },
  {
    "id": 5,
    "assetID": 10,
    "tranType": "WRITTEN-OFF",
    "assetConditionType": {
      "id": 10,
      "assetConditionType": "UNSERVICEABLE"
    }
  },
  {
    "id": 6,
    "assetID": 10,
    "tranType": "RETIRED",
    "assetConditionType": {
      "id": 10,
      "assetConditionType": "UNSERVICEABLE"
    }
  }
]


assetDS: AssetCondtionDTO[];
  assetObj: any;


'selectedType(trigger: MatSelectChange) {
  this.assetObj = trigger.value;

  const selectedItem = this.assetDS.find((x) => x.tranType.assetID == trigger.value);
  if (selectedItem) this.serviceLogArray.get('tranType').patchValue(selectedItem.id);
  console.log(this.assetObj)
}
assetCondition(){
  this.serviceSVC.getAssetCondition(5,10).subscribe((res: AssetCondtionDTO) => {
    this.assetObj = res;
  })
}'



HTML

 <td>
  <mat-select formControlName="assetCondition" style="width:200px;padding:10px"
           (selectionChange)="selectedType($event)">
      <mat-option ngFor="let items of assetObj" [value]="items.id">
          {{items.id}}
      </mat-option>
  </mat-select>
</td>
 <td>
<mat-select formControlName="tranType" style="width:200px;padding:10px">
     <mat-option ngFor="let items of assetObj" [value]="items.tranType.assetID">
       {{items.tranType.tranType}}</mat-option></mat-select> </td> ```

Solution

Code portion of your question is unclear and we can't understand written logic but from your description, I provide you an example to filter a fake list base on another select form control:

Template:

<form [formGroup]="formGroup">
  <div>
    <mat-select formControlName="assetCondition" style="width:200px;padding:10px"
             (selectionChange)="selectedType($event)">
        <mat-option *ngFor="let items of assetConditionTypes" [value]="items.id">
            {{items.assetConditionType}}
        </mat-option>
    </mat-select>
  </div>
  <div>
    <mat-select formControlName="tranType" style="width:200px;padding:10px">
         <mat-option *ngFor="let items of filteredAssets" [value]="items.assetID">
           {{items.tranType}}
          </mat-option>
         <mat-option *ngIf="filteredAssets.length===0">
           Pleas select type first!
          </mat-option>
    </mat-select>
  </div>
</form>

TS:

formGroup: FormGroup = new FormGroup({
    assetCondition: new FormControl(''),
    tranType: new FormControl('')
  });

  selectedType(trigger: MatSelectChange) {
    this.filteredAssets = this.myAssets.filter((asset) => asset.assetConditionType.id == +trigger.value);
    console.log(this.filteredAssets);
  }

  assetConditionTypes = [
    {
    "id": 9,
    "assetConditionType": "SERVICEABLE"
    },
    {
      "id": 10,
      "assetConditionType": "UNSERVICEABLE"
    }
  ];

  filteredAssets: any[] = [];

  myAssets = [
    {
      "id": 1,
      "assetID": 9,
      "tranType": "MAINTENANCE",
      "assetConditionType": {
        "id": 9,
        "assetConditionType": "SERVICEABLE"
      }
    },
    {
      "id": 2,
      "assetID": 9,
      "tranType": "UPGRADE",
      "assetConditionType": {
        "id": 9,
        "assetConditionType": "SERVICEABLE"
      }
    },
    {
      "id": 3,
      "assetID": 9,
      "tranType": "REPAIRABLE",
      "assetConditionType": {
        "id": 9,
        "assetConditionType": "SERVICEABLE"
      }
    },
    {
      "id": 4,
      "assetID": 10,
      "tranType": "DISPOSAL",
      "assetConditionType": {
        "id": 10,
        "assetConditionType": "UNSERVICEABLE"
      }
    },
    {
      "id": 5,
      "assetID": 10,
      "tranType": "WRITTEN-OFF",
      "assetConditionType": {
        "id": 10,
        "assetConditionType": "UNSERVICEABLE"
      }
    },
    {
      "id": 6,
      "assetID": 10,
      "tranType": "RETIRED",
      "assetConditionType": {
        "id": 10,
        "assetConditionType": "UNSERVICEABLE"
      }
    }
  ];

Answered By - Mostafa