Add multiple selection and single selection to chip list

Author: tinayuangao

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

@@ -128,7 +128,7 @@ <h4>Stacked Chips</h4>
       </md-chip-list>
 
       <h4>NgModel with chip list</h4>
-      <md-chip-list [(ngModel)]="selectedColors">
+      <md-chip-list [multiple]="true" [(ngModel)]="selectedColors">
         <md-chip *ngFor="let aColor of availableColors" color="{{aColor.color}}"
                  [value]="aColor.name" (remove)="removeColor(aColor)">
           {{aColor.name}}
@@ -137,6 +137,17 @@ <h4>NgModel with chip list</h4>
       </md-chip-list>
 
       The selected colors are <span *ngFor="let color of selectedColors"> {{color}}</span>.
+
+      <h4>NgModel with single selection chip list</h4>
+      <md-chip-list [(ngModel)]="selectedColor">
+        <md-chip *ngFor="let aColor of availableColors" color="{{aColor.color}}"
+                 [value]="aColor.name" (remove)="removeColor(aColor)">
+          {{aColor.name}}
+          <md-icon mdChipRemove>cancel</md-icon>
+        </md-chip>
+      </md-chip-list>
+
+      The selected color is {{selectedColor}}.
     </md-card-content>
   </md-card>
 </div>

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

@@ -93,4 +93,5 @@ export class ChipsDemo {
     this.visible = false;
   }
   selectedColors: any[] = ['Primary', 'Warn'];
+  selectedColor = 'Accent';
 }