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-title>Fillings</mat-card-title>
<mat-card-content> <mat-card-content>
<!-- TODO: #7. Create selectable controls with Angular Material --> <!-- TODO: #7. Create selectable controls with Angular Material -->
<ul> <mat-selection-list [(ngModel)]="selectedFillings" aria-label="Dumpling fillings">
<li> <mat-list-option *ngFor="let flavor of fillings" [value]="flavor" color="primary">
<input type="checkbox" name="vegan" id="vegan" {{ flavor }}
[(ngModel)]="fillings.bokchoy" </mat-list-option>
[(ngModel)]="fillings.tofu"> </mat-selection-list>
<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-card-content> </mat-card-content>
</mat-card> </mat-card>
<mat-card class="quantity selection-card"> <mat-card class="quantity selection-card">

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

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

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

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