From 43b7c34de00306dee3e693367a4c3cd6b5973c4d Mon Sep 17 00:00:00 2001
From: tinayuangao <tinagao@google.com>
Date: Tue, 29 Aug 2017 18:56:28 -0700
Subject: [PATCH] demo(chips): Add snackbar notification for adding/removing
 chips (#6706)

---
 src/demo-app/a11y/chips/chips-a11y.html |  3 ++-
 src/demo-app/a11y/chips/chips-a11y.ts   | 23 +++++++++++++++--------
 2 files changed, 17 insertions(+), 9 deletions(-)

diff --git a/src/demo-app/a11y/chips/chips-a11y.html b/src/demo-app/a11y/chips/chips-a11y.html
index 7b9527656c0..466003f84ae 100644
--- a/src/demo-app/a11y/chips/chips-a11y.html
+++ b/src/demo-app/a11y/chips/chips-a11y.html
@@ -23,8 +23,9 @@
 
   <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..."
diff --git a/src/demo-app/a11y/chips/chips-a11y.ts b/src/demo-app/a11y/chips/chips-a11y.ts
index 3bae983cda3..ca356a88de2 100644
--- a/src/demo-app/a11y/chips/chips-a11y.ts
+++ b/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,13 +48,16 @@ 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 {
@@ -53,6 +65,7 @@ export class ChipsAccessibilityDemo {
 
     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' }
-  ];
 }