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
Users
- {{user.first + ' ' + user.last}}
+ {{user.first + ' ' + user.last}}
@@ -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
+
+
+
+ Objects as Values (compareWith)
+
+
+
+
+ Users
+
+ {{user.first + ' ' + user.last}}
+
+
+
+```
+
+```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 @@
Users
- {{user.first + ' ' + user.last}}
+ {{user.first + ' ' + user.last}}
@@ -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
+
+
+
+ Objects as Values (compareWith)
+
+
+
+
+ Users
+
+ {{user.first + ' ' + user.last}}
+
+
+
+```
+
+```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
+```