vcgit-forge/angular-accessibility
1
0
Fork 0
mirror of https://github.com/Raghu-Ch/angular-accessibility.git synced 2026-02-10 04:43:02 -05:00
Code Issues Packages Projects Releases Wiki Activity

codelab: create selectable controls with Material

Browse Source
This commit is contained in:
twerske
2021-04-19 12:17:16 -07:00
parent f9ebb73eb9
commit 8d5e708e61
3 changed files with 10 additions and 66 deletions
Download Patch File Download Diff File Expand all files Collapse all files

52
src/app/shop/shop.component.html
View File

@@ -22,53 +22,11 @@ limitations under the License.
<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">

9
src/app/shop/shop.component.scss
View File

@@ -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 {

15
src/app/shop/shop.component.ts
View File

@@ -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);