Angular selectionCange on multiple inputs

Question

I have two selects, based on selected value from one select i am filtering data on second select, also i have option to add same row of form if desired, my problem is that if i select value from second row data (filteredcarPartsSub) from first changes do. how can i do selectionChange on only current row i am on?

here is my stackblitz

.html

       <mat-select #multiSelect formControlName="cat" name="cat" (selectionChange)="onChange($event); getCarPartsSubCategory($event, i)">
          <mat-option> 
            <ngx-mat-select-search [formControl]="carPartsMultiFilterCtrl" [placeholderLabel]="'search...'"
            [noEntriesFoundLabel]="'not found'">
          </ngx-mat-select-search>
          </mat-option>
          <mat-option *ngFor="let item of filteredcarParts | async" [value]="item">{{
            item.name
          }}</mat-option>
        </mat-select>

        <mat-select #multiSelect formControlName="carPartSubCategory">
          <mat-option>
            <ngx-mat-select-search [formControl]="carPartsMultiFilterCtrl" [placeholderLabel]="'search...'"
              [noEntriesFoundLabel]="'not found'">
            </ngx-mat-select-search>
          </mat-option>
          <mat-option *ngFor="let item of filteredcarPartsSub | async; let i = index;" [value]="item">{{item.name}}
          </mat-option>
        </mat-select>

.ts

  // get car part subcategory
  getCarPartsSubCategory(event: any) {
    let value = event.value;
    this.inputValue = [];
    console.log(value);
    this.inputValue = [...this.inputValue, ...value.carPartSubCategories];
    this.filteredcarPartsSub.next(this.inputValue);
  }

Answer 1

Your stackblitz was not able to open dropdown options for some reason.

Anyway by looking at your code, I see that, for all records you are refering to same ReplaySubject "filteredcarPartsSub". so when ever you update that subject from any of the row, it will trigger change in all rows.

Better have different subjects with their own options for each row.

If there can be too many rows, then may be you can have a custom pipe which filters the value from super set of options for mat-options in each row.