demo(button): display snackbar when button is clicked (#6327)

Author: tinayuangao

src/demo-app/a11y/button/button-a11y.html

@@ -39,9 +39,9 @@ <h2>Anchor elements</h2>
 
   <section>
     <h2>Buttons in different colors</h2>
-    <button md-button color="primary">Primary</button>
-    <button md-button color="accent">Accent</button>
-    <button md-button color="warn">Warn</button>
+    <button md-button color="primary" (click)="openSnackBar('Color is primary.')">Primary</button>
+    <button md-button color="accent" (click)="openSnackBar('Color is accent.')">Accent</button>
+    <button md-button color="warn" (click)="openSnackBar('Color is warn.')">Warn</button>
   </section>
 
   <section>

src/demo-app/a11y/button/button-a11y.ts

@@ -1,5 +1,5 @@
 import {Component} from '@angular/core';
-
+import {MdSnackBar} from '@angular/material';
 
 @Component({
   moduleId: module.id,
@@ -10,7 +10,16 @@ import {Component} from '@angular/core';
 export class ButtonAccessibilityDemo {
   counter: number = 0;
 
+  constructor(public snackBar: MdSnackBar) {}
+
+  openSnackBar(message: string) {
+    this.snackBar.open(message,  '',  {
+      duration: 2000,
+    });
+  }
+
   increase() {
     this.counter++;
+    this.openSnackBar(`Click counter is set to ${this.counter}`);
   }
 }