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 +```