demo(chips): Add snackbar notification for adding/removing chips (#6706)

Author: tinayuangao

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

@@ -23,8 +23,9 @@ <h2>Removable chips in a form field</h2>
 
   <md-form-field>
     <md-chip-list mdPrefix #chipList>
-      <md-chip *ngFor="let person of people" [color]="color">
+      <md-chip *ngFor="let person of people" [color]="color" (remove)="remove(person)">
         {{person.name}}
+        <md-icon mdChipRemove>cancel</md-icon>
       </md-chip>
     </md-chip-list>
     <input mdInput placeholder="New Contributor..."

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

@@ -1,5 +1,5 @@
 import {Component} from '@angular/core';
-import {MdChipInputEvent} from '@angular/material';
+import {MdChipInputEvent, MdSnackBar} from '@angular/material';
 
 
 export interface Person {
@@ -29,6 +29,15 @@ export class ChipsAccessibilityDemo {
     { name: 'Paul' }
   ];
 
+  availableColors = [
+    { name: 'none', color: '' },
+    { name: 'Primary', color: 'primary' },
+    { name: 'Accent', color: 'accent' },
+    { name: 'Warn', color: 'warn' }
+  ];
+
+  constructor(public snackBar: MdSnackBar) {}
+
   displayMessage(message: string): void {
     this.message = message;
   }
@@ -39,20 +48,24 @@ export class ChipsAccessibilityDemo {
 
     // Add our person
     if ((value || '').trim()) {
-      this.people.push({ name: value.trim() });
+      const name = value.trim();
+      this.people.push({ name: name });
+      this.snackBar.open(`${name} added`, '', {duration: 2000});
     }
 
     // Reset the input value
     if (input) {
       input.value = '';
     }
+
   }
 
   remove(person: Person): void {
     let index = this.people.indexOf(person);
 
     if (index >= 0) {
       this.people.splice(index, 1);
+      this.snackBar.open(`${person.name} deleted`, '', {duration: 2000});
     }
   }
 
@@ -61,10 +74,4 @@ export class ChipsAccessibilityDemo {
   }
 
 
-  availableColors = [
-    { name: 'none', color: '' },
-    { name: 'Primary', color: 'primary' },
-    { name: 'Accent', color: 'accent' },
-    { name: 'Warn', color: 'warn' }
-  ];
 }