From 66b4d11545a91e7d155c36eed736e70d15054ebf Mon Sep 17 00:00:00 2001
From: Jeremy Forsythe <jdforsythe@gmail.com>
Date: Fri, 2 Oct 2020 11:28:52 -0400
Subject: [PATCH] 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        | 80 ++++++++++++++++++--
 core/src/components/select/usage/angular.md | 82 +++++++++++++++++++--
 2 files changed, 151 insertions(+), 11 deletions(-)

diff --git a/core/src/components/select/readme.md b/core/src/components/select/readme.md
index 8d8825a3de..d1888ff1dd 100644
--- a/core/src/components/select/readme.md
+++ b/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;
+  }
 }
 ```
 
diff --git a/core/src/components/select/usage/angular.md b/core/src/components/select/usage/angular.md
index bff14eda67..0bfd985904 100644
--- a/core/src/components/select/usage/angular.md
+++ b/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'
   };
 }
-```
\ No newline at end of file
+```