diff --git a/src/lib/autocomplete/autocomplete.html b/src/lib/autocomplete/autocomplete.html index 41227961fe5c..18815afeb700 100644 --- a/src/lib/autocomplete/autocomplete.html +++ b/src/lib/autocomplete/autocomplete.html @@ -1,5 +1,12 @@ -
+
diff --git a/src/lib/autocomplete/autocomplete.spec.ts b/src/lib/autocomplete/autocomplete.spec.ts index 01e940027f05..ac284a4571e3 100644 --- a/src/lib/autocomplete/autocomplete.spec.ts +++ b/src/lib/autocomplete/autocomplete.spec.ts @@ -277,6 +277,19 @@ describe('MdAutocomplete', () => { }); })); + it('should be able to set extra classes on the panel', () => { + fixture.componentInstance.trigger.openPanel(); + fixture.whenStable().then(() => { + fixture.detectChanges(); + + const panel = + overlayContainerElement.querySelector('.mat-autocomplete-panel') as HTMLElement; + + expect(panel.classList).toContain('custom-one'); + expect(panel.classList).toContain('custom-two'); + }); + }); + it('should keep the label floating until the panel closes', async(() => { fixture.componentInstance.trigger.openPanel(); expect(fixture.componentInstance.formField.floatPlaceholder) @@ -1607,7 +1620,7 @@ describe('MdAutocomplete', () => { - + {{ state.code }}: {{ state.name }} @@ -1620,6 +1633,7 @@ class SimpleAutocomplete implements OnDestroy { valueSub: Subscription; placeholder = 'auto'; width: number; + panelClass = ['custom-one', 'custom-two']; @ViewChild(MdAutocompleteTrigger) trigger: MdAutocompleteTrigger; @ViewChild(MdAutocomplete) panel: MdAutocomplete; diff --git a/src/lib/autocomplete/autocomplete.ts b/src/lib/autocomplete/autocomplete.ts index 3126485ea6e5..148e9e44194c 100644 --- a/src/lib/autocomplete/autocomplete.ts +++ b/src/lib/autocomplete/autocomplete.ts @@ -72,6 +72,9 @@ export class MdAutocomplete implements AfterContentInit { /** Function that maps an option's control value to its display value in the trigger. */ @Input() displayWith: ((value: any) => string) | null = null; + /** Classes to be passed to the select panel. Supports the same syntax as `ngClass`. */ + @Input() panelClass: string|string[]|Set|{[key: string]: any}; + /** Event that is emitted whenever an option from the list is selected. */ @Output() optionSelected: EventEmitter = new EventEmitter(); @@ -114,13 +117,5 @@ export class MdAutocomplete implements AfterContentInit { this.optionSelected.emit(event); } - /** Sets a class on the panel based on whether it is visible. */ - _getClassList() { - return { - 'mat-autocomplete-visible': this.showPanel, - 'mat-autocomplete-hidden': !this.showPanel - }; - } - }