Expected behavior All your examples send the result from the options as a string instead of the value. I would like to get, in the input model, the selected object. (not only the string)

Actual behavior I have tried to sort this out and i only found the following solution based on a type checking and selected event.

I m wondering if they are any more suitable way to achieve this.

Resources (screenshots, code snippets etc.)

                                <input name="textShipper" type="text"
                                    class="completer-input form-control mdb-autocomplete"
                                    [ngModel]="searchTextShipper | async"
                                    (ngModelChange)="searchTextShipper.next($event)"
                                    [mdbAutoCompleter]="autoShipper" placeholder="Choose your customer" />
                                <mdb-auto-completer #autoShipper="mdbAutoCompleter"
                                    textNoResults="I have found no results."
                                    (selected)="onItemShipperSelect($event)">
                                    <mdb-option *ngFor="let option of resultsShippers | async" [value]="option">
                                        {{ option.name }}
                                    </mdb-option>
                                </mdb-auto-completer>




 public searchTextShipper = new Subject();
  public resultsShippers: Observable<Array<EDS_Company>>;
  public dataShippers = new Array<EDS_Company>();

  ngOnInit() {
   this.loadShipper();

    this.resultsShippers = this.searchTextShipper.pipe(
      map((value: string | EDS_Company) => {
        if ((typeof value === 'string')) {
          const filterValue = (value as string).toLowerCase();
          return this.dataShippers.filter((item: any) => item?.name.toLowerCase().includes(filterValue));
        } else {
          return this.dataShippers.filter((item: any) => item?.name.toLowerCase().includes((value as EDS_Company).name));
        }
      }));
  }

  loadShipper() {
    this.edsCompagnyService.getEdsCompanies()
      .pipe(
        takeUntil(this.$unsubscribeNotifier)
        , map((array: Array<EDS_Company>) => {
          return array.filter(x => x.name && x.name !== '').map(value => {
            return value;
          });
        })
      )
      .subscribe((array: any) => {
        this.dataShippers = array;
      }
        , err => {
          setTimeout(
            () => this.toast.error('Shipper loading error(' + err + ')')
          );
        });
  }

  onItemShipperSelect($event) {
    if ($event) {
      this.searchTextShipper.next($event.text.name);
      this.shipperCardCode = null;
      this.shipperId = 0;
      this.crudFormHelper.formShipperAddress.value = $event.text.address;
      this.shipperCardCode = $event.text.cardCode;
      this.shipperId = $event.text.idCompany;
      console.log($event.text);
      // this.loadShipperContact();
    }
  }

export class EDS_Company {

    idCompany: number;
    cardCode: string;
    name: string;
    address: string;
}