How to make Index based trigger for openPanel using MatAutocompleteTrigger

Question

I have an requirement to trigger autocomplete dropdown from workItem to autocomplete dropdown activity. When user select value from workItem dropdown immediately activity dropdown should open. these is for table data. which means each row contains workItem and activity as auto complete dropdown. so based on each index of workItem same index of activity should open.

Ex: if user click [0]workItem [0]activity should open, but I am unable achieve these behavior. each and every workItem dropdown select only first activity dropdown is opening.

Please suggest me on these, Thanks in advance.

index.ts

  @ViewChild('workItemInput', { read: MatAutocompleteTrigger }) workItemInput: MatAutocompleteTrigger;
  @ViewChild('activityInput', { read: MatAutocompleteTrigger }) activityInput: MatAutocompleteTrigger;

  onWorkItemChanged(){
    setTimeout(() => {
      this.activityInput.openPanel();
    });
  }

index.html

<input #workItemInput matInput [matAutocomplete]="auto" [(ngModel)]="workItem"/>

<mat-autocomplete [disableRipple]="true" #auto="matAutocomplete" (optionSelected)="onWorkItemChanged()">
    <mat-option [value]="item.trim()" *ngFor="let item of filteredWorkItemOptions" (click) = "checkWorkItemType();" >
        {{item}}
    </mat-option>
</mat-autocomplete>
 
<input #activityInput matInput [matAutocomplete]="auto" [(ngModel)]="activity" />

<mat-autocomplete [disableRipple]="true" #auto="matAutocomplete">
    <mat-option [value]="item.trim()" *ngFor="let item of filteredActivityptions" (onSelectionChange)="onSelFunc()" (click)="checkForChange()">
        {{item}}
    </mat-option>
</mat-autocomplete>

Answer 1

.ts

import { Component } from '@angular/core';

@Component({
  selector: 'app-your-component',
  templateUrl: './your-component.component.html',
  styleUrls: ['./your-component.component.css'],
})
export class YourComponent {
  activityDropdownStates: boolean[] = [];

  onWorkItemChanged(index: number) {
    this.activityDropdownStates[index] = true;
  }
}

.html

<div *ngFor="let item of workItems; let i = index">
  <input #workItemInput matInput [matAutocomplete]="auto" [(ngModel)]="item.workItem" (ngModelChange)="onWorkItemChanged(i)" />

  <mat-autocomplete [disableRipple]="true" #auto="matAutocomplete">
    <mat-option [value]="workItem" *ngFor="let workItem of filteredWorkItemOptions">
      {{ workItem }}
    </mat-option>
  </mat-autocomplete>

  <input
    *ngIf="activityDropdownStates[i]"
    #activityInput
    matInput
    [matAutocomplete]="auto"
    [(ngModel)]="item.activity"
  />

  <mat-autocomplete [disableRipple]="true" #auto="matAutocomplete">
    <mat-option [value]="activity" *ngFor="let activity of filteredActivityOptions">
      {{ activity }}
    </mat-option>
  </mat-autocomplete>
</div>

Try something like this, with this approach, you should achieve the desired behavior where selecting a "workItem" opens the corresponding "activity" dropdown without affecting others.