Select Component [selected] does not work with objects

[wilfredluijk]

Issue type

I'm submitting a ... (check one with "x")

• bug report
• feature request

Issue description

Current behavior:
When setting the [select] value of a Select component, objects are not working.

This will work and set 'one' selected:

<nb-select [selected]="1">
      <nb-option [value]="1">one</nb-option>
      <nb-option [value]="2">two</nb-option>
  </nb-select>

This will not work and have no selection:

<nb-select [selected]="{value:1}">
      <nb-option [value]="{value:1}">one</nb-option>
      <nb-option [value]="{value:2}">two</nb-option>
  </nb-select>

Expected behavior:
Either that the second scenaro results in 'one' being selected, or if it is not supported, the docs should be updated:
Currently it does not state that objects are not supported.

The docs:

     * Accepts selected item or array of selected items.
     * */
    set selected(value: any);

Dependencies
"dependencies": {
"@angular/animations": "~10.1.0",
"@angular/cdk": "^10.2.0",
"@angular/common": "~10.1.0",
"@angular/compiler": "~10.1.0",
"@angular/core": "~10.1.0",
"@angular/elements": "10.1.0",
"@angular/forms": "~10.1.0",
"@angular/localize": "^10.1.0",
"@angular/material": "^10.2.0",
"@angular/platform-browser": "~10.1.0",
"@angular/platform-browser-dynamic": "~10.1.0",
"@angular/router": "~10.1.0",
"@nebular/auth": "^6.0.0",
"@nebular/eva-icons": "^6.0.0",
"@nebular/theme": "^6.0.0",

[yggg]

Select does work with objects. But in your example:

<nb-select [selected]="{value:1}">
  <nb-option [value]="{value:1}">one</nb-option>
  <nb-option [value]="{value:2}">two</nb-option>
</nb-select>

object in the [selected] input and object in the option [value] are different objects. Objects aren't considered equal even if they have the same properties, so { value: 1 } === { value: 1 } is false.
To make the component work as you expect, you need a reference to an object passed to option [value] input. For example:

@Component({
  template: `
    <nb-select [selected]="selected">
      <nb-option *ngFor="let option of options" [value]="value">{{ value }}</nb-option>
    </nb-select>
  `
})
export class SelectWithObjects {
  options = [{ value: 1 }, { value: 2 }, { value: 3 }];
  selected = this.options[0]; // <---- reference to the option value object
}

It would be possible to provide a custom comparator function in the upcoming release (thanks to @ascripcaru). Then you'll be able to compare objects deeply or compare their individual properties, for example:

@Component({
  template: `
    <nb-card size="small">
      <nb-card-body>
        <nb-select [selected]="{ value: 1 }" [compareWith]="compareByValueProperty">
          <nb-option [value]="{ value: 1 }">1</nb-option>
          <nb-option [value]="{ value: 2 }">2</nb-option>
          <nb-option [value]="{ value: 3 }">3</nb-option>
        </nb-select>
      </nb-card-body>
    </nb-card>
  `,
  changeDetection: ChangeDetectionStrategy.OnPush,
})
export class SelectCompareWithComponent {
  compareByValueProperty(v1, v2): boolean {
    return v1.value === v2.value;
  }
}