fix(menu): update classlist when repositioning occurs due to scroll

Author: willshowell

src/demo-app/menu/menu-demo.html

@@ -167,3 +167,5 @@
     </mat-menu>
   </div>
 </div>
+
+<div style="height: 500px">This div is for testing scrolled menus.</div>

src/demo-app/menu/menu-demo.scss

@@ -8,6 +8,6 @@
   }
 
   .end-icon {
-    align-items: flex-end;
+    justify-content: flex-end;
   }
 }

src/lib/menu/menu-trigger.ts

@@ -29,6 +29,7 @@ import {
   Inject,
   InjectionToken,
   Input,
+  NgZone,
   OnDestroy,
   Optional,
   Output,
@@ -127,6 +128,7 @@ export class MatMenuTrigger implements AfterContentInit, OnDestroy {
   constructor(private _overlay: Overlay,
               private _element: ElementRef,
               private _viewContainerRef: ViewContainerRef,
+              private _ngZone: NgZone,
               @Inject(MAT_MENU_SCROLL_STRATEGY) private _scrollStrategy,
               @Optional() private _parentMenu: MatMenu,
               @Optional() @Self() private _menuItemInstance: MatMenuItem,
@@ -341,7 +343,8 @@ export class MatMenuTrigger implements AfterContentInit, OnDestroy {
       const posX: MenuPositionX = change.connectionPair.overlayX === 'start' ? 'after' : 'before';
       const posY: MenuPositionY = change.connectionPair.overlayY === 'top' ? 'below' : 'above';
 
-      this.menu.setPositionClasses(posX, posY);
+      // Note that the position changes may be outside the Angular zone
+      this._ngZone.run(() => this.menu.setPositionClasses(posX, posY));
     });
   }