diff --git a/src/demo-app/snack-bar/snack-bar-demo.html b/src/demo-app/snack-bar/snack-bar-demo.html
index 314064e9b67a..9fdc08ac9d21 100644
--- a/src/demo-app/snack-bar/snack-bar-demo.html
+++ b/src/demo-app/snack-bar/snack-bar-demo.html
@@ -27,6 +27,10 @@
SnackBar demo
+
+
+ Add extra class to container
+
diff --git a/src/demo-app/snack-bar/snack-bar-demo.scss b/src/demo-app/snack-bar/snack-bar-demo.scss
index 8d737ab226f6..b0b1052eae2e 100644
--- a/src/demo-app/snack-bar/snack-bar-demo.scss
+++ b/src/demo-app/snack-bar/snack-bar-demo.scss
@@ -1,3 +1,17 @@
-.demo-button-label-input {
- display: inline-block;
-}
\ No newline at end of file
+.party {
+ animation: party 5000ms infinite;
+}
+
+@keyframes party {
+ 0% { background: #00f; }
+ 10% { background: #8e44ad; }
+ 20% { background: #1abc9c; }
+ 30% { background: #d35400; }
+ 40% { background: #00f; }
+ 50% { background: #34495e; }
+ 60% { background: #00f; }
+ 70% { background: #2980b9; }
+ 80% { background: #f1c40f; }
+ 90% { background: #2980b9; }
+ 100% { background: #0ff; }
+}
diff --git a/src/demo-app/snack-bar/snack-bar-demo.ts b/src/demo-app/snack-bar/snack-bar-demo.ts
index 344d3ed11eb1..baad2beac03d 100644
--- a/src/demo-app/snack-bar/snack-bar-demo.ts
+++ b/src/demo-app/snack-bar/snack-bar-demo.ts
@@ -1,24 +1,27 @@
-import {Component} from '@angular/core';
+import {Component, ViewEncapsulation} from '@angular/core';
import {MdSnackBar, MdSnackBarConfig} from '@angular/material';
@Component({
moduleId: module.id,
selector: 'snack-bar-demo',
+ styleUrls: ['snack-bar-demo.css'],
templateUrl: 'snack-bar-demo.html',
+ encapsulation: ViewEncapsulation.None,
})
export class SnackBarDemo {
message: string = 'Snack Bar opened.';
actionButtonLabel: string = 'Retry';
action: boolean = false;
setAutoHide: boolean = true;
- autoHide: number = 0;
+ autoHide: number = 10000;
+ addExtraClass: boolean = false;
- constructor(
- public snackBar: MdSnackBar) { }
+ constructor(public snackBar: MdSnackBar) { }
open() {
let config = new MdSnackBarConfig();
config.duration = this.autoHide;
+ config.extraClasses = this.addExtraClass ? ['party'] : null;
this.snackBar.open(this.message, this.action && this.actionButtonLabel, config);
}
}
diff --git a/src/lib/snack-bar/README.md b/src/lib/snack-bar/README.md
index 0d696e9be5d4..dadbabcf5cd8 100644
--- a/src/lib/snack-bar/README.md
+++ b/src/lib/snack-bar/README.md
@@ -1 +1 @@
-Please see the official documentation at https://material.angular.io/components/component/snack-bar
\ No newline at end of file
+Please see the official documentation at https://material.angular.io/components/component/snack-bar
diff --git a/src/lib/snack-bar/snack-bar-config.ts b/src/lib/snack-bar/snack-bar-config.ts
index 33de8b16f5cc..ed59f8a88bb2 100644
--- a/src/lib/snack-bar/snack-bar-config.ts
+++ b/src/lib/snack-bar/snack-bar-config.ts
@@ -16,4 +16,7 @@ export class MdSnackBarConfig {
/** The length of time in milliseconds to wait before automatically dismissing the snack bar. */
duration?: number = 0;
+
+ /** Extra CSS classes to be added to the snack bar container. */
+ extraClasses?: string[];
}
diff --git a/src/lib/snack-bar/snack-bar-container.ts b/src/lib/snack-bar/snack-bar-container.ts
index 61d1ec646d42..d191067a0914 100644
--- a/src/lib/snack-bar/snack-bar-container.ts
+++ b/src/lib/snack-bar/snack-bar-container.ts
@@ -10,6 +10,8 @@ import {
AnimationTransitionEvent,
NgZone,
OnDestroy,
+ Renderer,
+ ElementRef,
} from '@angular/core';
import {
BasePortalHost,
@@ -71,7 +73,10 @@ export class MdSnackBarContainer extends BasePortalHost implements OnDestroy {
/** The snack bar configuration. */
snackBarConfig: MdSnackBarConfig;
- constructor(private _ngZone: NgZone) {
+ constructor(
+ private _ngZone: NgZone,
+ private _renderer: Renderer,
+ private _elementRef: ElementRef) {
super();
}
@@ -81,6 +86,14 @@ export class MdSnackBarContainer extends BasePortalHost implements OnDestroy {
throw new MdSnackBarContentAlreadyAttached();
}
+ if (this.snackBarConfig.extraClasses) {
+ // Not the most efficient way of adding classes, but the renderer doesn't allow us
+ // to pass in an array or a space-separated list.
+ for (let cssClass of this.snackBarConfig.extraClasses) {
+ this._renderer.setElementClass(this._elementRef.nativeElement, cssClass, true);
+ }
+ }
+
return this._portalHost.attachComponentPortal(portal);
}
diff --git a/src/lib/snack-bar/snack-bar.spec.ts b/src/lib/snack-bar/snack-bar.spec.ts
index 94ea75cc161b..d555f649ae10 100644
--- a/src/lib/snack-bar/snack-bar.spec.ts
+++ b/src/lib/snack-bar/snack-bar.spec.ts
@@ -320,6 +320,18 @@ describe('MdSnackBar', () => {
flushMicrotasks();
expect(dismissObservableCompleted).toBeTruthy('Expected the snack bar to be dismissed');
}));
+
+ it('should add extra classes to the container', () => {
+ snackBar.open(simpleMessage, simpleActionLabel, {
+ viewContainerRef: testViewContainerRef,
+ extraClasses: ['one', 'two']
+ });
+
+ let containerClasses = overlayContainerElement.querySelector('snack-bar-container').classList;
+
+ expect(containerClasses).toContain('one');
+ expect(containerClasses).toContain('two');
+ });
});
describe('MdSbackBar with parent MdSnackBar', () => {