diff --git a/src/demo-app/snack-bar/snack-bar-demo.html b/src/demo-app/snack-bar/snack-bar-demo.html
index 3e81b93bbee9..026258e8bf3c 100644
--- a/src/demo-app/snack-bar/snack-bar-demo.html
+++ b/src/demo-app/snack-bar/snack-bar-demo.html
@@ -2,11 +2,13 @@
SnackBar demo
Message:
-
Show button
-
+
+ Show button on snack bar
+
+
diff --git a/src/demo-app/snack-bar/snack-bar-demo.ts b/src/demo-app/snack-bar/snack-bar-demo.ts
index 790d045ec6c8..a684a2e39bd4 100644
--- a/src/demo-app/snack-bar/snack-bar-demo.ts
+++ b/src/demo-app/snack-bar/snack-bar-demo.ts
@@ -1,5 +1,5 @@
import {Component, ViewContainerRef} from '@angular/core';
-import {MdSnackBar, MdSnackBarConfig} from '@angular2-material/snack-bar';
+import {MdSnackBar, MdSnackBarConfig} from '@angular/material';
@Component({
moduleId: module.id,
diff --git a/src/lib/index.ts b/src/lib/index.ts
index ead3f4846688..027498aea622 100644
--- a/src/lib/index.ts
+++ b/src/lib/index.ts
@@ -18,6 +18,7 @@ export * from './select/index';
export * from './sidenav/index';
export * from './slider/index';
export * from './slide-toggle/index';
+export * from './snack-bar/index';
export * from './tabs/index';
export * from './toolbar/index';
export * from './tooltip/index';
diff --git a/src/lib/module.ts b/src/lib/module.ts
index ccb27607db3d..ade62b770cec 100644
--- a/src/lib/module.ts
+++ b/src/lib/module.ts
@@ -23,7 +23,7 @@ import {MdIconModule} from './icon/index';
import {MdProgressCircleModule} from './progress-circle/index';
import {MdProgressBarModule} from './progress-bar/index';
import {MdInputModule} from './input/index';
-import {MdSnackBarModule} from '@angular2-material/snack-bar';
+import {MdSnackBarModule} from './snack-bar/snack-bar';
import {MdTabsModule} from './tabs/index';
import {MdToolbarModule} from './toolbar/index';
import {MdTooltipModule} from './tooltip/index';
diff --git a/src/lib/snack-bar/README.md b/src/lib/snack-bar/README.md
new file mode 100644
index 000000000000..33b2a4b0bee3
--- /dev/null
+++ b/src/lib/snack-bar/README.md
@@ -0,0 +1,38 @@
+# MdSnackBar
+`MdSnackBar` is a service, which opens snack bar notifications in the view.
+
+### Methods
+
+| Name | Description |
+| --- | --- |
+| `open(message: string,
actionLabel: string, config: MdSnackBarConfig): MdSnackBarRef` | Creates and opens a simple snack bar noticiation matching material spec. |
+| `openFromComponent(component: ComponentType, config: MdSnackBarConfig): MdSnackBarRef` | Creates and opens a snack bar noticiation with a custom component as content. |
+
+### Config
+
+| Key | Description |
+| --- | --- |
+| `viewContainerRef: ViewContainerRef` | The view container ref to attach the snack bar to. |
+| `role: AriaLivePoliteness = 'assertive'` | The politeness level to announce the snack bar with. |
+| `announcementMessage: string` | The message to announce with the snack bar. |
+
+
+### Example
+The service can be injected in a component.
+```ts
+@Component({
+ selector: 'my-component'
+ providers: [MdSnackBar]
+})
+export class MyComponent {
+
+ constructor(snackBar: MdSnackBar
+ viewContainerRef: ViewContainerRef) {}
+
+ failedAttempt() {
+ config = new MdSnackBarConfig(this.viewContainerRef);
+ this.snackBar.open('It didn\'t quite work!', 'Try Again', config);
+ }
+
+}
+```
\ No newline at end of file
diff --git a/src/lib/snack-bar/base-snack-bar.ts b/src/lib/snack-bar/base-snack-bar.ts
deleted file mode 100644
index ffbcb65bae7e..000000000000
--- a/src/lib/snack-bar/base-snack-bar.ts
+++ /dev/null
@@ -1,12 +0,0 @@
-import {MdSnackBarRef} from './snack-bar-ref';
-
-
-export class BaseSnackBarContent {
- /** The instance of the component making up the content of the snack bar. */
- snackBarRef: MdSnackBarRef;
-
- /** Dismisses the snack bar. */
- dismiss(): void {
- this.snackBarRef.dismiss();
- }
-}
diff --git a/src/lib/snack-bar/package.json b/src/lib/snack-bar/package.json
deleted file mode 100644
index 5122e38fa551..000000000000
--- a/src/lib/snack-bar/package.json
+++ /dev/null
@@ -1,29 +0,0 @@
-{
- "name": "@angular2-material/snack-bar",
- "version": "2.0.0-alpha.8-2",
- "description": "Angular 2 Material snack bar",
- "main": "./snack-bar.umd.js",
- "module": "./index.js",
- "typings": "./index.d.ts",
- "repository": {
- "type": "git",
- "url": "https://github.com/angular/material2.git"
- },
- "keywords": [
- "angular",
- "material",
- "material design",
- "components",
- "snackbar",
- "toast",
- "notification"
- ],
- "license": "MIT",
- "bugs": {
- "url": "https://github.com/angular/material2/issues"
- },
- "homepage": "https://github.com/angular/material2#readme",
- "peerDependencies": {
- "@angular2-material/core": "2.0.0-alpha.8-2"
- }
-}
diff --git a/src/lib/snack-bar/simple-snack-bar.scss b/src/lib/snack-bar/simple-snack-bar.scss
index d380adaea3c2..9935cd92950e 100644
--- a/src/lib/snack-bar/simple-snack-bar.scss
+++ b/src/lib/snack-bar/simple-snack-bar.scss
@@ -1,6 +1,6 @@
md-simple-snackbar {
- display: flex;
- justify-content: space-between;
+ display: flex;
+ justify-content: space-between;
}
.md-simple-snackbar-message {
diff --git a/src/lib/snack-bar/simple-snack-bar.ts b/src/lib/snack-bar/simple-snack-bar.ts
index 542cbe08f586..d74d6736c3df 100644
--- a/src/lib/snack-bar/simple-snack-bar.ts
+++ b/src/lib/snack-bar/simple-snack-bar.ts
@@ -1,20 +1,32 @@
import {Component} from '@angular/core';
-import {BaseSnackBarContent} from './base-snack-bar';
+import {MdSnackBarRef} from './snack-bar-ref';
+/**
+ * A component used to open as the default snack bar, matching material spec.
+ * This should only be used internally by the snack bar service.
+ */
@Component({
moduleId: module.id,
selector: 'simple-snack-bar',
templateUrl: 'simple-snack-bar.html',
styleUrls: ['simple-snack-bar.css'],
})
-export class SimpleSnackBar extends BaseSnackBarContent {
+export class SimpleSnackBar {
/** The message to be shown in the snack bar. */
message: string;
/** The label for the button in the snack bar. */
action: string;
+ /** The instance of the component making up the content of the snack bar. */
+ snackBarRef: MdSnackBarRef;
+
+ /** Dismisses the snack bar. */
+ dismiss(): void {
+ this.snackBarRef.dismiss();
+ }
+
/** If the action button should be shown. */
get hasAction(): boolean { return !!this.action; }
}
diff --git a/src/lib/snack-bar/snack-bar-config.ts b/src/lib/snack-bar/snack-bar-config.ts
index 9225964d33a6..8eaebb8202cc 100644
--- a/src/lib/snack-bar/snack-bar-config.ts
+++ b/src/lib/snack-bar/snack-bar-config.ts
@@ -1,11 +1,13 @@
import {ViewContainerRef} from '@angular/core';
+import {AriaLivePoliteness} from '../core';
-export type SnackBarRole = 'alert' | 'polite';
-
export class MdSnackBarConfig {
- /** The aria-role of the snack bar. */
- role: SnackBarRole = 'alert';
+ /** The politeness level for the MdAriaLiveAnnouncer announcement. */
+ politeness: AriaLivePoliteness = 'assertive';
+
+ /** Message to be announced by the MdAriaLiveAnnouncer */
+ announcementMessage: string;
/** The view container to place the overlay for the snack bar into. */
viewContainerRef: ViewContainerRef;
diff --git a/src/lib/snack-bar/snack-bar-container.ts b/src/lib/snack-bar/snack-bar-container.ts
index 1ce167d3ac25..0ccbd6e3bda0 100644
--- a/src/lib/snack-bar/snack-bar-container.ts
+++ b/src/lib/snack-bar/snack-bar-container.ts
@@ -8,7 +8,7 @@ import {
ComponentPortal,
TemplatePortal,
PortalHostDirective
-} from '@angular2-material/core';
+} from '../core';
import {MdSnackBarConfig} from './snack-bar-config';
import {MdSnackBarContentAlreadyAttached} from './snack-bar-errors';
diff --git a/src/lib/snack-bar/snack-bar-errors.ts b/src/lib/snack-bar/snack-bar-errors.ts
index cb8bbe2b5723..abd3fb3892ff 100644
--- a/src/lib/snack-bar/snack-bar-errors.ts
+++ b/src/lib/snack-bar/snack-bar-errors.ts
@@ -1,4 +1,4 @@
-import {MdError} from '@angular2-material/core';
+import {MdError} from '../core';
export class MdSnackBarContentAlreadyAttached extends MdError {
diff --git a/src/lib/snack-bar/snack-bar-ref.ts b/src/lib/snack-bar/snack-bar-ref.ts
index 4f1581fdd972..9d03085679d4 100644
--- a/src/lib/snack-bar/snack-bar-ref.ts
+++ b/src/lib/snack-bar/snack-bar-ref.ts
@@ -1,4 +1,4 @@
-import {OverlayRef} from '@angular2-material/core';
+import {OverlayRef} from '../core';
import {Observable} from 'rxjs/Observable';
import {Subject} from 'rxjs/Subject';
@@ -10,7 +10,7 @@ import {Subject} from 'rxjs/Subject';
*/
export class MdSnackBarRef {
/** The instance of the component making up the content of the snack bar. */
- readonly instance: T|any;
+ readonly instance: T;
/** Subject for notifying the user that the snack bar has closed. */
private _afterClosed: Subject = new Subject();
@@ -18,7 +18,7 @@ export class MdSnackBarRef {
/** If the snack bar is active. */
private _isActive: boolean = true;
- constructor(instance: T|any, private _overlayRef: OverlayRef) {
+ constructor(instance: T, private _overlayRef: OverlayRef) {
// Sets the readonly instance of the snack bar content component.
this.instance = instance;
this.afterDismissed().subscribe(null, null, () => { this._isActive = false; });
diff --git a/src/lib/snack-bar/snack-bar.ts b/src/lib/snack-bar/snack-bar.ts
index 8053bf3865ee..c147524dcb50 100644
--- a/src/lib/snack-bar/snack-bar.ts
+++ b/src/lib/snack-bar/snack-bar.ts
@@ -5,15 +5,16 @@ import {
ComponentRef,
} from '@angular/core';
import {
- Overlay,
- OverlayState,
- OverlayRef,
ComponentType,
ComponentPortal,
+ Overlay,
OverlayModule,
+ OverlayRef,
+ OverlayState,
PortalModule,
OVERLAY_PROVIDERS,
-} from '@angular2-material/core';
+ MdLiveAnnouncer,
+} from '../core';
import {CommonModule} from '@angular/common';
import {MdSnackBarConfig} from './snack-bar-config';
import {MdSnackBarRef} from './snack-bar-ref';
@@ -35,7 +36,8 @@ export class MdSnackBar {
/** A reference to the current snack bar in the view. */
private _snackBarRef: MdSnackBarRef;
- constructor(private _overlay: Overlay) {}
+ constructor(private _overlay: Overlay,
+ private _live: MdLiveAnnouncer) {}
/**
* Creates and dispatches a snack bar with a custom component for the content, removing any
@@ -48,8 +50,9 @@ export class MdSnackBar {
}
let overlayRef = this._createOverlay();
let snackBarContainer = this._attachSnackBarContainer(overlayRef, config);
-
- return this._attachSnackbarContent(component, snackBarContainer, overlayRef);
+ let mdSnackBarRef = this._attachSnackbarContent(component, snackBarContainer, overlayRef);
+ this._live.announce(config.announcementMessage, config.politeness);
+ return mdSnackBarRef;
}
@@ -58,7 +61,9 @@ export class MdSnackBar {
*/
open(message: string, actionLabel: string,
config: MdSnackBarConfig): MdSnackBarRef {
+ config.announcementMessage = message;
let simpleSnackBarRef = this.openFromComponent(SimpleSnackBar, config);
+ simpleSnackBarRef.instance.snackBarRef = simpleSnackBarRef;
simpleSnackBarRef.instance.message = message;
simpleSnackBarRef.instance.action = actionLabel;
return simpleSnackBarRef;
@@ -87,7 +92,6 @@ export class MdSnackBar {
let portal = new ComponentPortal(component);
let contentRef = container.attachComponentPortal(portal);
let snackBarRef = > new MdSnackBarRef(contentRef.instance, overlayRef);
- snackBarRef.instance.snackBarRef = snackBarRef;
this._snackBarRef = snackBarRef;
return snackBarRef;
@@ -118,7 +122,7 @@ export class MdSnackBarModule {
static forRoot(): ModuleWithProviders {
return {
ngModule: MdSnackBarModule,
- providers: [MdSnackBar, OVERLAY_PROVIDERS]
+ providers: [MdSnackBar, OVERLAY_PROVIDERS, MdLiveAnnouncer]
};
}
}
diff --git a/src/lib/system-config-spec.ts b/src/lib/system-config-spec.ts
index 7e4369d361e5..acf90f93b5ba 100644
--- a/src/lib/system-config-spec.ts
+++ b/src/lib/system-config-spec.ts
@@ -41,4 +41,4 @@ System.config({
defaultExtension: 'js'
}
}
-});
\ No newline at end of file
+});