How to use a custom type in a combobox?

[devent]

I created a generic custombox as per documentation. Typescript is typed, in theory I could use my custom type for the options and value.

readonly options = input<Gauge[]>([]);
readonly value = model<Gauge | undefined>();

  protected readonly filteredOptions = computed(() =>
    this.options().filter(option => option.type.toLowerCase().includes(this.filter().toLowerCase()) || option.symbol.toLowerCase().includes(this.filter().toLowerCase())),
  );

// etc.

This kind of works. The filter works, the selected value works. But in the drop down list I see only [object Object] which makes sense because it's not a string anymore but a custom object. How can change the rendering of the object?

I come from Java and there is always a render method. Is it here just toString() or something similar? Or is there some kind of render() method?

Edit: overriding toString() didn't work.

[ashley-hunter]

Hey! Sure so this would be something you could use generics for in your combobox component and typically you would need to also accept an input to extract the string from an object. Something like this should work:

https://stackblitz.com/edit/stackblitz-starters-xe7nlips?file=src%2Fglobal_styles.css

Any issues let me know! Thanks!

[devent]

Thank you that works. The critical code for me is then:

     <div *ngpComboboxPortal ngpComboboxDropdown>
        @for (option of filteredOptions(); track option) {
          <div [ngpComboboxOptionValue]="option" ngpComboboxOption>
            {{ displayWith()(option) }}
          </div>
        } @empty {
          <div class="empty-message">No options found</div>
        }
      </div>

And:

 /** Get the text representation of an item */
readonly displayWith = input.required<(option: T) => string>();

[ashley-hunter]

Correct 😊 hopefully that should provide the missing capability you need. Any issues just reach out, thanks!