codelab: create selectable controls with Material

Author: twerske

src/app/shop/shop.component.html

@@ -22,53 +22,11 @@
       <mat-card-title>Fillings</mat-card-title>
       <mat-card-content>  
         <!-- TODO: #7. Create selectable controls with Angular Material -->
-        <ul>
-          <li>
-            <input type="checkbox" name="vegan" id="vegan"
-                   [(ngModel)]="fillings.bokchoy"
-                   [(ngModel)]="fillings.tofu">
-            <label for="tall">Vegan</label>
-            <ul>
-              <li>
-                <input type="checkbox" 
-                        id="bokchoy" 
-                        [(ngModel)]="fillings.bokchoy"
-                        name="bokchoy">
-                <label for="bokchoy">Bok Choy</label>
-              </li>
-              <li>
-                <input type="checkbox" 
-                        id="tofu" 
-                        [(ngModel)]="fillings.tofu"
-                        name="tofu">
-                <label for="tofu">Tofu & Shitake</label>
-              </li>
-            </ul>
-          </li>
-          <li>
-            <input type="checkbox" 
-                   [(ngModel)]="fillings.chicken"
-                   [(ngModel)]="fillings.impossible"
-                   name="meat" id="meat">
-            <label for="meat">Meat</label>
-            <ul>
-              <li>
-                <input type="checkbox" 
-                        id="chicken" 
-                        [(ngModel)]="fillings.chicken"
-                        name="chicken">
-                <label for="chicken">Chicken</label>
-              </li>
-              <li>
-                <input type="checkbox" 
-                        id="impossible" 
-                        [(ngModel)]="fillings.impossible"
-                        name="impossible">
-                <label for="impossible">Impossible Meat</label>
-              </li>
-            </ul>
-          </li>
-        </ul>
+        <mat-selection-list [(ngModel)]="selectedFillings" aria-label="Dumpling fillings">
+          <mat-list-option *ngFor="let flavor of fillings" [value]="flavor" color="primary">
+            {{ flavor }}
+          </mat-list-option>
+        </mat-selection-list>
       </mat-card-content>
     </mat-card>
     <mat-card class="quantity selection-card">

src/app/shop/shop.component.scss

@@ -62,15 +62,6 @@
       flex-grow: 1;
 
       // TODO: #7. Create selectable controls with Angular Material
-      ul { 
-        list-style: none;
-        margin: 5px 20px;
-        padding: 0;
-      }
-      
-      li {
-        margin: 10px 0;
-      }
     }
 
     .quantity {

src/app/shop/shop.component.ts

@@ -25,12 +25,8 @@ export class ShopComponent implements OnInit {
   color = 'gold';
 
   // TODO: #7. Create selectable controls with Angular Material
-  fillings = {
-    bokchoy: true,
-    tofu: true,
-    chicken: false,
-    impossible: false,
-  };
+  fillings: string[] = ['Bok Choy & Chili Crunch', 'Tofu & Mushroom', 'Chicken & Ginger', 'Impossible Meat & Spinach'];
+  selectedFillings: string[] = [];
 
   // TODO: #11. Announce changes with LiveAnnouncer
   constructor() { }
@@ -49,10 +45,9 @@ export class ShopComponent implements OnInit {
     let flavor = '';
 
     // TODO: #7. Create selectable controls with Angular Material
-    if (this.fillings.bokchoy) { flavor += 'Bok Choy '; }
-    if (this.fillings.tofu) { flavor += 'Tofu & Mushroom '; }
-    if (this.fillings.chicken) { flavor += 'Chicken & Ginger '; }
-    if (this.fillings.impossible) { flavor += 'Impossible Meat '; }
+    this.selectedFillings.forEach(filling => {
+      flavor = flavor + ' ' + filling;
+    });
 
     const fakePurchase = `Purchase ${this.quantity} ${flavor}dumplings in the color ${this.color}!`;
     console.log(fakePurchase);