codelab: announce changes with LiveAnnouncer

Author: twerske

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();
   }
 

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