docs(select): fix objects as values angular usage (#22143)

Fix the Objects as Values documentation to add the necessary value
property to the template, simplify the compare function, and add an
interface for type checking.

Add an Objects as Values with Multiple Selection documentation section
to show the difference with the compare function which needs to
determine if an object is in the array of selected objects

This fixes an issue noted in the forums at https://forum.ionicframework.com/t/ionic-5-ion-select-objects-as-values-not-working/191807/2

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;
-  };
+  }
+}
+```
 
-  compareWith = compareWithFn;
+### 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;
+    }
+
+    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;
-  };
+  }
+}
+```
 
-  compareWith = compareWithFn;
+### 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;
+    }
+
+    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'
   };
 }
-```
+```