Disable Multiple instances of NgbTypehead

123 Views Asked by At

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 timeth

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

0

There are 0 best solutions below