refactor(live-announcer): run outside NgZone

Switches to running the timeout from the `LiveAnnouncer` outside the `NgZone`, because it does all of its DOM manipulation directly on the element and it doesn't have to trigger Angular's change detection.

Author: crisbeto

src/cdk/a11y/live-announcer/live-announcer.ts

@@ -33,7 +33,8 @@ export class LiveAnnouncer implements OnDestroy {
 
   constructor(
       @Optional() @Inject(LIVE_ANNOUNCER_ELEMENT_TOKEN) elementToken: any,
-      @Inject(DOCUMENT) private _document: any) {
+      @Inject(DOCUMENT) private _document: any,
+      private _ngZone: NgZone) {
 
     // We inject the live element and document as `any` because the constructor signature cannot
     // reference browser globals (HTMLElement, Document) on non-browser environments, since having
@@ -58,11 +59,13 @@ export class LiveAnnouncer implements OnDestroy {
     // - With Chrome and IE11 with NVDA or JAWS, a repeated (identical) message won't be read a
     //   second time without clearing and then using a non-zero delay.
     // (using JAWS 17 at time of this writing).
-    return new Promise(resolve => {
-      setTimeout(() => {
-        this._liveElement.textContent = message;
-        resolve();
-      }, 100);
+    return this._ngZone.runOutsideAngular(() => {
+      return new Promise(resolve => {
+        setTimeout(() => {
+          this._liveElement.textContent = message;
+          resolve();
+        }, 100);
+      });
     });
   }
 
@@ -73,7 +76,7 @@ export class LiveAnnouncer implements OnDestroy {
   }
 
   private _createLiveElement(): HTMLElement {
-    let liveEl = this._document.createElement('div');
+    const liveEl = this._document.createElement('div');
 
     liveEl.classList.add('cdk-live-announcer-element');
     liveEl.classList.add('cdk-visually-hidden');
@@ -134,8 +137,8 @@ export class CdkAriaLive implements OnDestroy {
 
 /** @docs-private @deprecated @breaking-change 7.0.0 */
 export function LIVE_ANNOUNCER_PROVIDER_FACTORY(
-    parentDispatcher: LiveAnnouncer, liveElement: any, _document: any) {
-  return parentDispatcher || new LiveAnnouncer(liveElement, _document);
+    parentDispatcher: LiveAnnouncer, liveElement: any, _document: any, ngZone: NgZone) {
+  return parentDispatcher || new LiveAnnouncer(liveElement, _document, ngZone);
 }
 
 
@@ -147,6 +150,7 @@ export const LIVE_ANNOUNCER_PROVIDER: Provider = {
     [new Optional(), new SkipSelf(), LiveAnnouncer],
     [new Optional(), new Inject(LIVE_ANNOUNCER_ELEMENT_TOKEN)],
     DOCUMENT,
+    NgZone,
   ],
   useFactory: LIVE_ANNOUNCER_PROVIDER_FACTORY
 };