docs(select): fix Objects as Values docs

core/src/components/select/readme.md

@@ -209,7 +209,7 @@ However, the Select Option does set a class for easier styling and allows for th
   <ion-item>
     <ion-label>Users</ion-label>
     <ion-select [compareWith]="compareWith">
-      <ion-select-option *ngFor="let user of users">{{user.first + ' ' + user.last}}</ion-select-option>
+      <ion-select-option *ngFor="let user of users" [value]="user">{{user.first + ' ' + user.last}}</ion-select-option>
     </ion-select>
   </ion-item>
 </ion-list>
@@ -218,13 +218,19 @@ However, the Select Option does set a class for easier styling and allows for th
 ```typescript
 import { Component } from '@angular/core';
 
+interface User {
+  id: number;
+  first: string;
+  last: string;
+}
+
 @Component({
   selector: 'select-example',
   templateUrl: 'select-example.html',
   styleUrls: ['./select-example.css'],
 })
 export class SelectExample {
-  users: any[] = [
+  users: User[] = [
     {
       id: 1,
       first: 'Alice',
@@ -242,11 +248,75 @@ export class SelectExample {
     }
   ];
 
-  compareWithFn = (o1, o2) => {
+  compareWith(o1: User, o2: User) {
     return o1 && o2 ? o1.id === o2.id : o1 === o2;
-  };
+  }
+}
+```
+
+### Objects as Values with Multiple Selection
+
+```html
+<ion-list>
+  <ion-list-header>
+    <ion-label>
+      Objects as Values (compareWith)
+    </ion-label>
+  </ion-list-header>
+
+  <ion-item>
+    <ion-label>Users</ion-label>
+    <ion-select [compareWith]="compareWith" multiple="true">
+      <ion-select-option *ngFor="let user of users" [value]="user">{{user.first + ' ' + user.last}}</ion-select-option>
+    </ion-select>
+  </ion-item>
+</ion-list>
+```
+
+```typescript
+import { Component } from '@angular/core';
 
-  compareWith = compareWithFn;
+interface User {
+  id: number;
+  first: string;
+  last: string;
+}
+
+@Component({
+  selector: 'select-example',
+  templateUrl: 'select-example.html',
+  styleUrls: ['./select-example.css'],
+})
+export class SelectExample {
+  users: User[] = [
+    {
+      id: 1,
+      first: 'Alice',
+      last: 'Smith',
+    },
+    {
+      id: 2,
+      first: 'Bob',
+      last: 'Davis',
+    },
+    {
+      id: 3,
+      first: 'Charlie',
+      last: 'Rosenburg',
+    }
+  ];
+
+  compareWith(o1: User, o2: User | User[]) {
+    if (!o1 || !o2) {
+      return o1 === o2;
+    }
+
+    if (Array.isArray(o2)) {
+      return o2.some((u: User) => u.id === o1.id);
+    }
+
+    return o1.id === o2.id;
+  }
 }
 ```
 

core/src/components/select/usage/angular.md

@@ -80,7 +80,7 @@
   <ion-item>
     <ion-label>Users</ion-label>
     <ion-select [compareWith]="compareWith">
-      <ion-select-option *ngFor="let user of users">{{user.first + ' ' + user.last}}</ion-select-option>
+      <ion-select-option *ngFor="let user of users" [value]="user">{{user.first + ' ' + user.last}}</ion-select-option>
     </ion-select>
   </ion-item>
 </ion-list>
@@ -89,13 +89,19 @@
 ```typescript
 import { Component } from '@angular/core';
 
+interface User {
+  id: number;
+  first: string;
+  last: string;
+}
+
 @Component({
   selector: 'select-example',
   templateUrl: 'select-example.html',
   styleUrls: ['./select-example.css'],
 })
 export class SelectExample {
-  users: any[] = [
+  users: User[] = [
     {
       id: 1,
       first: 'Alice',
@@ -113,11 +119,75 @@ export class SelectExample {
     }
   ];
 
-  compareWithFn = (o1, o2) => {
+  compareWith(o1: User, o2: User) {
     return o1 && o2 ? o1.id === o2.id : o1 === o2;
-  };
+  }
+}
+```
+
+### Objects as Values with Multiple Selection
+
+```html
+<ion-list>
+  <ion-list-header>
+    <ion-label>
+      Objects as Values (compareWith)
+    </ion-label>
+  </ion-list-header>
+
+  <ion-item>
+    <ion-label>Users</ion-label>
+    <ion-select [compareWith]="compareWith" multiple="true">
+      <ion-select-option *ngFor="let user of users" [value]="user">{{user.first + ' ' + user.last}}</ion-select-option>
+    </ion-select>
+  </ion-item>
+</ion-list>
+```
+
+```typescript
+import { Component } from '@angular/core';
+
+interface User {
+  id: number;
+  first: string;
+  last: string;
+}
+
+@Component({
+  selector: 'select-example',
+  templateUrl: 'select-example.html',
+  styleUrls: ['./select-example.css'],
+})
+export class SelectExample {
+  users: User[] = [
+    {
+      id: 1,
+      first: 'Alice',
+      last: 'Smith',
+    },
+    {
+      id: 2,
+      first: 'Bob',
+      last: 'Davis',
+    },
+    {
+      id: 3,
+      first: 'Charlie',
+      last: 'Rosenburg',
+    }
+  ];
+
+  compareWith(o1: User, o2: User | User[]) {
+    if (!o1 || !o2) {
+      return o1 === o2;
+    }
 
-  compareWith = compareWithFn;
+    if (Array.isArray(o2)) {
+      return o2.some((u: User) => u.id === o1.id);
+    }
+
+    return o1.id === o2.id;
+  }
 }
 ```
 
@@ -198,4 +268,4 @@ export class SelectExample {
     subHeader: 'Select your favorite color'
   };
 }
-```
+```