ngbTypeahead for custom entity

user_5412820 0
Viewed 392

How can I integrate custom entity together with ngbTypeahead?

Let's say I have following service:

type EntityArrayResponseType = HttpResponse<IMicroservice[]>;

@Injectable({ providedIn: 'root' })
export class MicroserviceService {
  constructor(protected http: HttpClient) {}

  query(req?: any): Observable<EntityArrayResponseType> {
    const options = createRequestOption(req);
    return this.http.get<IMicroservice[]>(this.resourceUrl, { params: options, observe: 'response' });
  }

Here is my component:

<input class="form-control" type="text" placeholder="Search" aria-label="Search"
       [ngbTypeahead]="search"
       [resultFormatter]="microserviceFormatter"
       [inputFormatter]="microserviceInputFormatter"
/>

And event handler:

@Component({
  selector: 'jhi-microservice-search',
  templateUrl: './microservice-search.component.html',
  styleUrls: ['./microservice-search.component.scss'],
})
export class MicroserviceSearchComponent implements OnInit {
  constructor(protected microserviceService: MicroserviceService) {}

  search = (text$: Observable<string>) =>
    text$.pipe(
      debounceTime(200),
      distinctUntilChanged(),

      switchMap(searchText => (searchText.length < 2 ? [] : this.microserviceService.query()))
    );

  microserviceFormatter = (result: HttpResponse<IMicroservice>) => result?.body?.name;
  microserviceInputFormatter = (result: HttpResponse<IMicroservice>) => result?.body?.name;

  ngOnInit(): void {}
}

I have tried to use both this.microserviceService.query().map() or this.microserviceService.query().do() as some suggest here, but both give me errors and there are no import suggestions.

Moreover search is incorrect:

ERROR in src/main/webapp/app/entities/microservice/microservice-dashboard/microservice-search/microservice-search.component.html:2:8 - error TS2322: Type '(text$: Observable<string>) => Observable<EntityArrayResponseType>' is not as
signable to type '(text: Observable<string>) => Observable<readonly any[]>'.
  Type 'Observable<EntityArrayResponseType>' is not assignable to type 'Observable<readonly any[]>'.
    Type 'HttpResponse<IMicroservice[]>' is missing the following properties from type 'readonly any[]': length, concat, join, slice, and 16 more.

2        [ngbTypeahead]="search"
         ~~~~~~~~~~~~~~~~~~~~~~~

Please advise. You can find full code samples here: https://github.com/tillias/microservice-catalog/commit/4a5f39b2fdd5afbb098ead980e7ed7c61f63287f

ng-bootstrap rxjs angular typescript
1 Answers

Here is working solution, cause syntax changed in Angular 9 and newest TS:

    search = (text$: Observable<string>) =>
        text$.pipe(
          debounceTime(200),
          distinctUntilChanged(),
    
          switchMap(searchText => (searchText.length < 2 ? [] :
              this.loadData(searchText)
            )
          )
        );
    
      loadData(searchText: string): Observable<IMicroservice[]> {
        return this.microserviceService.query().pipe(
          map(response => response.body!.filter(m => m.name!.toLowerCase().includes(searchText.toLowerCase())) || [{}])
        );
      }

    formatter = (result: IMicroservice) => result.name || "";

    inputFormatter = (result: IMicroservice) => result.name || "";

Component itself:

<input class="form-control" type="text" placeholder="Search" aria-label="Search"
       [ngbTypeahead]="search"
       [resultFormatter]="formatter"
       [inputFormatter]="inputFormatter"
/>
user_54128200
Related