I'm using Angular 9 and NgbTypehead version 6 on my project. I have a form with multiple type heads on *ngfor when i select one type head it open all the type heads. below image shows what my error is i need to open only one at time
this is my html code which i used
<div class="form-group col-md-7 col-sm-12">
<input id="typeahead-template" name="{{i}}_name" type="text" class="form-control"
[(ngModel)]="expense.expense" [ngbTypeahead]="search" placeholder="Select Expense"
(focus)="focus.next($any($event).target.value)" (click)="click.next($any($event).target.value);"/>
</div>
this is my typescript code which i used to search
search = (text: Observable<string>) => {
const debouncedText$ = text.pipe(debounceTime(200), distinctUntilChanged());
const inputFocus$ = this.focus;
return merge(debouncedText$, inputFocus$).pipe(
map(term => (term === '' ? this.expenseList
: this.expenseList.filter(v => v.toLowerCase().indexOf(term.toLowerCase()) > -1)))
);
}
StackBlitz Url: https://stackblitz.com/edit/angular-ivy-xnondq