onTagEdited is not working correctly while sorting after editing

[Sagar Kumar]

I am new to Angular and using ngx-chips. After editing the tags I am trying to sort them. Only editing works fine without sorting but when I try to sort them not work properly. here is my code

tags.component.html:-

<tag-input
[id]="field.fieldId"
[formControlName]="field.fieldName"
[(ngModel)]='field.defaultValue'
class="form-control"
[displayBy]="'text'"
(onTagEdited)="onTextChangeInput($event)"
(onAdd)="onItemAdded($event)"
(onRemove)="onItemRemoved($event)"
[placeholder]="field.otherProperties.placeholder"
[editable]="!field.otherProperties.disabled"
[identifyBy]="'text'"
[secondaryPlaceholder]="field.otherProperties.placeholder"
[disable]="field.otherProperties.disabled">

tags.component.ts:-

onTextChangeInput(value:any) {
debugger;
this.isModified();
if(this.field.defaultValue[value.index] && this.field.defaultValue[value.index].text){
this.field.defaultValue[value.index].text = value.tag.text;
}
this.field.defaultValue = this.sortByText(this.field.defaultValue);
if(this.field.fieldName == "tradeNameList")
{this._exchangeDataService.settradeNameListOptions(this.field.defaultValue)}
}

one more thing its works fine on the console of chrome and in the Firefox browser. Can anyone help with this issue?

I think I know the issue but not the solution. In this case, when I edit a tag it calls the onTextChangeInput function and edits the tag on the basis of the index, and then sort all the tags. When data flow from the typeScript file to the HTML file it edits again on the same index that's why it's showing the correct result on the console but not on the UI screen. Can anyone help me with the solution for this issue?