Skip to content

Commit

Permalink
feat(select): custom text for multiple selected values
Browse files Browse the repository at this point in the history
add input property to set a callback which will display a custom text if multiple values are selected. Similar to MdAutocomplete.displayWith.

fixes #6218
  • Loading branch information
davidreher committed Aug 2, 2017
1 parent 8a23157 commit b50b225
Show file tree
Hide file tree
Showing 2 changed files with 43 additions and 0 deletions.
36 changes: 36 additions & 0 deletions src/lib/select/select.spec.ts
Original file line number Diff line number Diff line change
Expand Up @@ -2435,6 +2435,42 @@ describe('MdSelect', () => {
expect(trigger.textContent).toContain('Tacos, Pizza, Steak');
});

it('should display a custom text if multipleDisplayWith is set', () => {
testInstance.select.multipleDisplayWith = (values: string[]): string => {
return `${values.length} selected`
};
trigger.click();
fixture.detectChanges();

const options = overlayContainerElement.querySelectorAll('md-option') as
NodeListOf<HTMLElement>;

options[0].click();
options[2].click();
options[5].click();
fixture.detectChanges();

expect(trigger.textContent).toContain('3 selected');
});

it('should only affect the text if multipleDisplayWith is set', () => {
testInstance.select.multipleDisplayWith = (values: string[]): string => {
return `${values.length} selected`
};
trigger.click();
fixture.detectChanges();

const options = overlayContainerElement.querySelectorAll('md-option') as
NodeListOf<HTMLElement>;

options[0].click();
options[2].click();
options[5].click();
fixture.detectChanges();

expect(testInstance.control.value).toEqual(['steak-0', 'tacos-2', 'eggs-5']);
});

it('should throw an exception when trying to set a non-array value', async(() => {
expect(() => {
testInstance.control.setValue('not-an-array');
Expand Down
7 changes: 7 additions & 0 deletions src/lib/select/select.ts
Original file line number Diff line number Diff line change
Expand Up @@ -318,6 +318,9 @@ export class MdSelect extends _MdSelectMixinBase implements AfterContentInit, On
this._multiple = coerceBooleanProperty(value);
}

/** Function that maps the selected values to (a single) display value in the trigger. */
@Input() multipleDisplayWith: ((viewValues: any[]) => string) | null = null;

/** Whether to float the placeholder text. */
@Input()
get floatPlaceholder(): FloatPlaceholderType { return this._floatPlaceholder; }
Expand Down Expand Up @@ -531,6 +534,10 @@ export class MdSelect extends _MdSelectMixinBase implements AfterContentInit, On
if (this._multiple) {
let selectedOptions = this._selectionModel.selected.map(option => option.viewValue);

if (this.multipleDisplayWith) {
return this.multipleDisplayWith(selectedOptions);
}

if (this._isRtl()) {
selectedOptions.reverse();
}
Expand Down

0 comments on commit b50b225

Please sign in to comment.