Ngx-chips populate not showing `name` or `id` which provided dynamically

Question

I am working with ngx-chips and below code is to populate suggestion tag-input field.

<div *ngFor="let field of fields; let i=index">
    <label class="pt-3 font-600">{{field.label}} {{field.id}}</label>
    <tag-input
      [identifyBy]="'id'"
      [inputClass]="riProSuggestionField"
      [displayBy]="'name'"
      (onFocus)="onFocusInput($event)"
      [placeholder]="field.placeholder"
      [(ngModel)]="field.data"
      [inputId]="field.id"
      [onlyFromAutocomplete]="true"
      name="{{field.label}}"
    >
      <tag-input-dropdown
      [autocompleteObservable]="getSuggestions"

      </tag-input-dropdown>
    </tag-input>
  </div>

In above code I have multiple fields and I am populating it by doing ngFor , While doing this I am trying different name to each tag-input as I have to fetch different fields data to each individual input tag. Having only one autoCompleteObservable function called getSuggestions which will work accordingly to which field have focused right now.

My .ts code is to get Which input have clicked is

onFocusInput(data) {
    const focusedElement = document.getElementsByClassName('ng2-tag-input--focused');
    console.log('Focused element', focusedElement);
  }

I wanted to get the name of focused <tag-input></tag-input> so that I could getSuggestions according to this name.