Question on <c8y-typeahead>

Forum
,
1

I want to use the component: codex to show & select & possibly create new items.

My items are not devices (IIdentified) but a list of client name: clients : string [];

When I use the template:

<c8y-typeahead container="body" name="selectedClient" [placeholder]="'Search for devices...'"
  (onSearch)="setPipe($event)" [allowFreeEntries]="true" [(ngModel)]="selectedClient">
  <c8y-li class="p-l-8 p-r-8 c8y-list__item--link"
    *c8yFor="let client of clients; notFound: notFoundTemplate; pipe: filterPipe"
    (click)="selectedClient = client" [active]="selectedClient === client">
    <c8y-highlight [text]="client" [pattern]="pattern"></c8y-highlight>
  </c8y-li>
  <ng-template #notFoundTemplate>
    <c8y-li class="bg-level-2 p-8 sticky-bottom" *ngIf="pattern.length > 0">
      <span translate>No exact match found.</span>
      <button class="btn btn-default btn-sm m-l-8" title="Add new client" type="button" translate>
        Add new client
      </button>
    </c8y-li>
  </ng-template>
</c8y-typeahead>

I get an error:

Type 'string[]' is not assignable to type 'IResultList<IIdentified> | Observable<IResultList<IIdentified>>'.
Type 'string[]' is missing the following properties from type 'Observable<IResultList<IIdentified>>': source, operator, lift, subscribe, and 2 more.

What do I have to modify the template:

  1. to use string as items
  2. offer to create a new client if it does not exist

Regards Christof

2

Hi Chistof,

the c8yFor directive you are using is expecting the direct response of a Cumulocity API call which would still be wrapped in the IResultList and not the raw data that you bound it to. Either you directly hook it up to a response from e.g. inventoryService.list(), or you need to use *ngFor instead of c8yFor I assume.

3

Hi Hendrik,

I use ngFor instead of c8yFor and use the following template:

<c8y-typeahead container="body" name="selectedClient" [placeholder]="'Search for clients...'"
  [allowFreeEntries]="true" [(ngModel)]="selectedClient" (onSearch)="onSearch($event)">
  <c8y-li class="p-l-8 p-r-8 c8y-list__item--link" *ngFor="let client of filteredClients"
    (click)="selectClient(client)">
    {{client.name}}
  </c8y-li>
</c8y-typeahead>

This works now and filter the options in the:

  onSearch(term: string) {
    this.searchTerm = term;
    this.filteredClients = this.clientsAsOptions.filter(cl =>
      cl.name.toLowerCase().includes(term.toLowerCase())
    );
  }