1

I'm working with ngbTypeahead on my Angular app, and with an array of object it works fine. My problem is when I try to show a simple string on the input Typehead it not work.

app.component.ts

import { Component, OnInit, ViewChild, AfterViewInit, ViewChildren, QueryList, ElementRef, Renderer2 } from '@angular/core';
import { FormGroup, FormControl } from '@angular/forms';
import { Subject, Observable, merge } from 'rxjs';
import { debounceTime, distinctUntilChanged, map, filter, switchMap } from 'rxjs/operators';
import { NgbTypeahead } from '@ng-bootstrap/ng-bootstrap';

const states = ['Alabama', 'Alaska', 'American Samoa', 'Arizona', 'Arkansas', 'California', 'Colorado',
  'Connecticut', 'Delaware', 'District Of Columbia', 'Federated States Of Micronesia', 'Florida', 'Georgia'];

  const myArray: any = [
    {id: 1, Name: 'John'},
    {id: 2, Name: 'Paul'},
    {id: 3, Name: 'Mark'},
    {id: 4, Name: 'Turi '},
];


@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent implements OnInit {  
  selected: any;
  ngOnInit() {    
  }    

  @ViewChild('instance') instance;  
  focus$ = new Subject<string>();
  click$ = new Subject<string>();

  search = (text$: Observable<string>) => {
    const debouncedText$ = text$.pipe(
      debounceTime(200),
      distinctUntilChanged()
    );
    const clicksWithClosedPopup$ = this.click$.pipe(filter(() => !this.instance.isPopupOpen()));
    const inputFocus$ = this.focus$;

    return merge(debouncedText$, inputFocus$, clicksWithClosedPopup$).pipe(
      map(term => (term === '' ? myArray : myArray.filter(v => v.Name.toLowerCase().indexOf(term.toLowerCase()) > -1)).slice(0, 10))
    );    
  };
  formatter = (x: { Name: string }) => x.Name;

  onSubmit1() {    

    this.selected = 'TEST';  // <---- This not work  
  }

  onSubmit2() {
    this.selected = myArray[2];
  }
}

app.component.html

<div style="margin: 20px;">
  <div class="row">
      <div class="col-sm">
          <div class="form-group">      
              <ng-template #rt let-r="result" let-t="term">
                        {{ r.Name }}
              </ng-template>               
              <input                    
                id="typeahead-template"
                type="text"                                
                class="form-control"
                placeholder="Search..."
                [(ngModel)]="selected"
                [ngbTypeahead]="search"
                [resultTemplate]="rt"
                [inputFormatter]="formatter"
                (focus)="focus$.next($event.target.value)"
                (click)="click$.next($event.target.value)"
                #instance="ngbTypeahead"
              />                             
          </div>
      </div>                              
    </div>
    <button type="submit" (click)="onSubmit1()" class="btn btn-primary">String</button>
    <br>
    <br>
    <button type="submit" (click)="onSubmit2()" class="btn btn-primary">Record of Array</button>
</div>

I realized this stackblitz: https://stackblitz.com/edit/angular-r6spj3

Can you help me?

Thanks

1 Answer 1

1

Working stackblitz

This is because you are assigning a string instead of myArray element object.

Change onSubmit() function as below:

 onSubmit1() {    
   this.selected = {Name:'TEST'};   
 }

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.