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.