From 4dd6f7f4867a6727ba15072ce6b4c6cfa4f63edd Mon Sep 17 00:00:00 2001
From: twerske <pokepsi@gmail.com>
Date: Mon, 19 Apr 2021 12:19:15 -0700
Subject: [PATCH] codelab: announce changes with LiveAnnouncer

---
 .../color-picker-dialog/color-picker-dialog.component.ts     | 5 ++++-
 src/app/shop/shop.component.ts                               | 4 +++-
 2 files changed, 7 insertions(+), 2 deletions(-)

diff --git a/src/app/shop/color-picker/color-picker-dialog/color-picker-dialog.component.ts b/src/app/shop/color-picker/color-picker-dialog/color-picker-dialog.component.ts
index abbc8a1..5aa9f58 100644
--- a/src/app/shop/color-picker/color-picker-dialog/color-picker-dialog.component.ts
+++ b/src/app/shop/color-picker/color-picker-dialog/color-picker-dialog.component.ts
@@ -13,6 +13,7 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
+import { LiveAnnouncer } from '@angular/cdk/a11y';
 import { Component, EventEmitter, OnInit, Output } from '@angular/core';
 import { MatDialogRef } from '@angular/material/dialog';
 
@@ -44,7 +45,8 @@ export class ColorPickerDialogComponent implements OnInit {
   ];
 
   // TODO: #11. Announce changes with LiveAnnouncer
-  constructor(public dialogRef: MatDialogRef<ColorPickerDialogComponent>) { }
+  constructor(public dialogRef: MatDialogRef<ColorPickerDialogComponent>,
+    private liveAnnouncer: LiveAnnouncer) { }
 
   ngOnInit(): void { }
 
@@ -54,6 +56,7 @@ export class ColorPickerDialogComponent implements OnInit {
     }
 
     // TODO: #11. Announce changes with LiveAnnouncer
+    this.liveAnnouncer.announce(`Select color: ${color}`);
     this.dialogRef.close();
   }
 
diff --git a/src/app/shop/shop.component.ts b/src/app/shop/shop.component.ts
index 7b12105..a4bcd82 100644
--- a/src/app/shop/shop.component.ts
+++ b/src/app/shop/shop.component.ts
@@ -13,6 +13,7 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
+import { LiveAnnouncer } from '@angular/cdk/a11y';
 import { Component, OnInit } from '@angular/core';
 
 @Component({
@@ -29,7 +30,7 @@ export class ShopComponent implements OnInit {
   selectedFillings: string[] = [];
 
   // TODO: #11. Announce changes with LiveAnnouncer
-  constructor() { }
+  constructor(private liveAnnouncer: LiveAnnouncer) { }
 
   ngOnInit(): void { }
 
@@ -53,5 +54,6 @@ export class ShopComponent implements OnInit {
     console.log(fakePurchase);
 
     // TODO: #11. Announce changes with LiveAnnouncer
+    this.liveAnnouncer.announce(fakePurchase);
   }
 }