Fix snackbar example auto-opening and never closing (#58)

* snackbar example fixes

* Fix snackbar opening automatically

* always hide

Author: jelbourn

firebase.json

@@ -1,6 +1,19 @@
 {
   "hosting": {
     "public": "dist",
-    "cleanUrls": true
+    "cleanUrls": true,
+    "rewrites": [
+      {
+        "source": "/**/!(*.@(js|ts|html|css|json|svg|png|jpg|jpeg))",
+        "destination": "/index.html"
+      }
+    ],
+    "ignore": [
+      "firebase.json",
+      "**/.*",
+      "**/node_modules/**",
+      "tmp",
+      "deploy"
+    ]
   }
 }

src/app/examples/example-module.ts

@@ -8,7 +8,7 @@ import {CheckboxOverviewExample} from './checkbox-overview/checkbox-overview-exa
 import {SliderConfigurableExample} from './slider-configurable/slider-configurable-example';
 import {TabsOverviewExample} from './tabs-overview/tabs-overview-example';
 import {
-  SnackBarComponentExampleSnack,
+  PizzaPartyComponent,
   SnackBarComponentExample
 } from './snack-bar-component/snack-bar-component-example';
 import {
@@ -186,7 +186,7 @@ export const EXAMPLE_LIST = [
   SlideToggleConfigurableExample,
   SlideToggleOverviewExample,
   SnackBarComponentExample,
-  SnackBarComponentExampleSnack,
+  PizzaPartyComponent,
   SnackBarOverviewExample,
   TabsOverviewExample,
   TabsTemplateLabelExample,

src/app/examples/snack-bar-component/snack-bar-component-example-snack.css

@@ -1,3 +1,3 @@
-.example-snack {
-  color: #0f0;
+.example-pizza-party {
+  color: hotpink;
 }

src/app/examples/snack-bar-component/snack-bar-component-example-snack.html

@@ -1 +1,3 @@
-I'm a custom component... in a snack bar.
+<span class="example-pizza-party">
+  🍕🍕🍕🍕🍕 Pizza party!!! 🍕🍕🍕🍕🍕
+</span>

src/app/examples/snack-bar-component/snack-bar-component-example.html

@@ -0,0 +1,3 @@
+<button md-button (click)="openSnackBar()" aria-label="Show an example snack-bar">
+  Pizza party
+</button>

src/app/examples/snack-bar-component/snack-bar-component-example.ts

@@ -1,14 +1,18 @@
-import {Component, ViewEncapsulation} from '@angular/core';
+import {Component} from '@angular/core';
 import {MdSnackBar} from '@angular/material';
 
 
 @Component({
   selector: 'snack-bar-component-example',
-  template: '',
+  templateUrl: './snack-bar-component-example.html',
 })
 export class SnackBarComponentExample {
-  constructor(snackBar: MdSnackBar) {
-    snackBar.openFromComponent(SnackBarComponentExampleSnack);
+  constructor(public snackBar: MdSnackBar) {}
+
+  openSnackBar() {
+    this.snackBar.openFromComponent(PizzaPartyComponent, {
+      duration: 500,
+    });
   }
 }
 
@@ -17,9 +21,5 @@ export class SnackBarComponentExample {
   selector: 'snack-bar-component-example-snack',
   templateUrl: './snack-bar-component-example-snack.html',
   styleUrls: ['./snack-bar-component-example-snack.css'],
-  host: {
-    'class': 'example-snack',
-  },
-  encapsulation: ViewEncapsulation.None,
 })
-export class SnackBarComponentExampleSnack {}
+export class PizzaPartyComponent {}

src/app/examples/snack-bar-overview/snack-bar-overview-example.ts

@@ -10,6 +10,8 @@ export class SnackBarOverviewExample {
   constructor(public snackBar: MdSnackBar) {}
 
   openSnackBar(message: string, action: string) {
-    this.snackBar.open(message, action);
+    this.snackBar.open(message, action, {
+      duration: 2000,
+    });
   }
 }