Update demo to use base classes

Author: vanessanschmitt

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

@@ -5,84 +5,84 @@
     <mat-card-content>
       <h4>Simple</h4>
 
-      <mat-chip-grid>
-        <mat-chip-cell>Chip 1</mat-chip-cell>
-        <mat-chip-cell>Chip 2</mat-chip-cell>
-        <mat-chip-cell disabled>Chip 3</mat-chip-cell>
-      </mat-chip-grid>
+      <mat-chip-set>
+        <mat-chip>Chip 1</mat-chip>
+        <mat-chip>Chip 2</mat-chip>
+        <mat-chip disabled>Chip 3</mat-chip>
+      </mat-chip-set>
 
       <h4>Unstyled</h4>
 
-      <mat-chip-grid>
-        <mat-basic-chip-cell>Basic Chip 1</mat-basic-chip-cell>
-        <mat-basic-chip-cell>Basic Chip 2</mat-basic-chip-cell>
-        <mat-basic-chip-cell>Basic Chip 3</mat-basic-chip-cell>
-      </mat-chip-grid>
+      <mat-chip-set>
+        <mat-basic-chip>Basic Chip 1</mat-basic-chip>
+        <mat-basic-chip>Basic Chip 2</mat-basic-chip>
+        <mat-basic-chip>Basic Chip 3</mat-basic-chip>
+      </mat-chip-set>
 
       <h4>Advanced</h4>
 
-      <mat-chip-grid selectable="false">
-        <mat-chip-cell color="accent" selected="true">Selected/Colored</mat-chip-cell>
+      <mat-chip-set selectable="false">
+        <mat-chip color="accent" selected="true">Selected/Colored</mat-chip>
 
-        <mat-chip-cell color="warn" selected="true" *ngIf="visible"
+        <mat-chip color="warn" selected="true" *ngIf="visible"
                        (destroyed)="displayMessage('chip destroyed')" (removed)="toggleVisible()">
           With Events
           <mat-icon matChipRemove>cancel</mat-icon>
-        </mat-chip-cell>
-      </mat-chip-grid>
+        </mat-chip>
+      </mat-chip-set>
       <div>{{message}}</div>
 
       <h4>With avatar and icons</h4>
 
-      <mat-chip-grid>
-        <mat-chip-cell disabled>
+      <mat-chip-set>
+        <mat-chip disabled>
           <mat-icon matChipAvatar>home</mat-icon>
           Home
           <mat-icon matChipRemove>cancel</mat-icon>
-        </mat-chip-cell>
+        </mat-chip>
 
-        <mat-chip-cell color="accent" selected="true">
+        <mat-chip color="accent" selected="true">
           <mat-chip-avatar>P</mat-chip-avatar>
           Portel
           <mat-icon matChipRemove>cancel</mat-icon>
-        </mat-chip-cell>
+        </mat-chip>
 
-        <mat-chip-cell>
+        <mat-chip>
           <mat-chip-avatar>M</mat-chip-avatar>
           Molly
-        </mat-chip-cell>
+        </mat-chip>
 
-        <mat-chip-cell>
+        <mat-chip>
           Koby
           <mat-icon matChipRemove>cancel</mat-icon>
-        </mat-chip-cell>
+        </mat-chip>
 
-        <mat-chip-cell>
+        <mat-chip>
           Razzle
-        </mat-chip-cell>
+        </mat-chip>
 
-        <mat-chip-cell>
+        <mat-chip>
           <img src="https://material.angularjs.org/material2_assets/ngconf/Mal.png" matChipAvatar>
           Mal
-        </mat-chip-cell>
+        </mat-chip>
 
-        <mat-chip-cell selected="true" color="warn">
+        <mat-chip selected="true" color="warn">
           <img src="https://material.angularjs.org/material2_assets/ngconf/Husi.png" matChipAvatar>
           Husi
           <mat-icon matChipRemove>cancel</mat-icon>
-        </mat-chip-cell>
+        </mat-chip>
 
-        <mat-chip-cell>
+        <mat-chip>
           Good
           <mat-icon matChipTrailingIcon>star</mat-icon>
-        </mat-chip-cell>
+        </mat-chip>
 
-        <mat-chip-cell>
+        <mat-chip>
           Bad
           <mat-icon matChipTrailingIcon>star_border</mat-icon>
-        </mat-chip-cell>
+        </mat-chip>
 
-      </mat-chip-grid>
+      </mat-chip-set>
     </mat-card-content>
   </mat-card>
 </div>