Merge pull request #4255 from IgniteUI/mvenkov/autoscrollstrategy-outisde-ngzone

Autoscrollstrategy scroll outside NgZone

Author: bazal4o

projects/igniteui-angular/src/lib/services/overlay/overlay.ts

@@ -22,7 +22,8 @@ import {
     Injector,
     Type,
     OnDestroy,
-    NgModuleRef
+    NgModuleRef,
+    NgZone
 } from '@angular/core';
 import { AnimationBuilder, AnimationReferenceMetadata, AnimationMetadataType, AnimationAnimateRefMetadata } from '@angular/animations';
 import { fromEvent, Subject } from 'rxjs';
@@ -106,7 +107,8 @@ export class IgxOverlayService implements OnDestroy {
         private _appRef: ApplicationRef,
         private _injector: Injector,
         private builder: AnimationBuilder,
-        @Inject(DOCUMENT) private document: any) {
+        @Inject(DOCUMENT) private document: any,
+        private _zone: NgZone) {
         this._document = <Document>this.document;
     }
 
@@ -116,7 +118,7 @@ export class IgxOverlayService implements OnDestroy {
      * @param settings Display settings for the overlay, such as positioning and scroll/close behavior.
      * @returns Id of the created overlay. Valid until `onClosed` is emitted.
      */
-    attach(element: ElementRef , settings?: OverlaySettings): string;
+    attach(element: ElementRef, settings?: OverlaySettings): string;
     /**
      * Generates Id. Provide this Id when call `show(id, settings?)` method
      * @param component Component Type to show in overlay
@@ -329,7 +331,7 @@ export class IgxOverlayService implements OnDestroy {
     }
 
     private getOverlayInfo(component: any, moduleRef?: NgModuleRef<any>): OverlayInfo {
-        const info: OverlayInfo = {};
+        const info: OverlayInfo = { ngZone: this._zone };
         if (component instanceof ElementRef) {
             info.elementRef = <ElementRef>component;
         } else {

projects/igniteui-angular/src/lib/services/overlay/scroll/IScrollStrategy.ts

@@ -7,7 +7,7 @@ export interface IScrollStrategy {
     /**
      * Initializes the strategy. Should be called once
      * @param document reference to Document object.
-     * @param overlayService IgxOverlay service to use in this strategy
+     * @param overlayService IgxOverlay service to use in this strategy.
      * @param id Unique id for this strategy.
      * ```typescript
      * settings.scrollStrategy.initialize(document, overlay, id);

projects/igniteui-angular/src/lib/services/overlay/scroll/README.md

@@ -34,6 +34,6 @@ import { NoOpScrollStrategy } from "./scroll/NoOpScrollStrategy";
 
 | Name            | Description                                                                     | Parameters |
 |-----------------|---------------------------------------------------------------------------------|------------|
-|initialize       | Initialize the strategy. Should be called once                                  |document, overlayService, id|
+|initialize       | Initialize the strategy. Should be called once                  |document, overlayService, id|
 |attach           | Attaches the strategy                                                           |-           |
 |detach           | Detaches the strategy                                                           |-           |

projects/igniteui-angular/src/lib/services/overlay/scroll/absolute-scroll-strategy.ts

@@ -1,5 +1,6 @@
 import { IgxOverlayService } from '../overlay';
 import { ScrollStrategy } from './scroll-strategy';
+import { NgZone } from '@angular/core';
 
 /**
  * On scroll reposition the overlay content.
@@ -10,6 +11,7 @@ export class AbsoluteScrollStrategy extends ScrollStrategy {
     private _overlayService: IgxOverlayService;
     private _id: string;
     private _scrollContainer: HTMLElement;
+    private _zone: NgZone;
 
     constructor(scrollContainer?: HTMLElement) {
         super(scrollContainer);
@@ -24,15 +26,18 @@ export class AbsoluteScrollStrategy extends ScrollStrategy {
         this._overlayService = overlayService;
         this._id = id;
         this._document = document;
+        this._zone = overlayService.getOverlayById(id).ngZone;
         this._initialized = true;
     }
 
     /** @inheritdoc */
     public attach(): void {
-        if (this._scrollContainer) {
-            this._scrollContainer.addEventListener('scroll', this.onScroll, true);
+        if (this._zone) {
+            this._zone.runOutsideAngular(() => {
+                this.addScrollEventListener();
+            });
         } else {
-            this._document.addEventListener('scroll', this.onScroll, true);
+            this.addScrollEventListener();
         }
     }
 
@@ -47,6 +52,14 @@ export class AbsoluteScrollStrategy extends ScrollStrategy {
         this._initialized = false;
     }
 
+    private addScrollEventListener() {
+        if (this._scrollContainer) {
+            this._scrollContainer.addEventListener('scroll', this.onScroll, true);
+        } else {
+            this._document.addEventListener('scroll', this.onScroll, true);
+        }
+    }
+
     private onScroll = () => {
         this._overlayService.repositionAll();
     }

projects/igniteui-angular/src/lib/services/overlay/utilities.ts

@@ -2,7 +2,7 @@ import { IPositionStrategy } from './position/IPositionStrategy';
 
 import { IScrollStrategy } from './scroll';
 import { AnimationReferenceMetadata, AnimationPlayer } from '@angular/animations';
-import { ComponentRef, ElementRef } from '@angular/core';
+import { ComponentRef, ElementRef, NgZone } from '@angular/core';
 import { IgxOverlayOutletDirective } from '../../directives/toggle/toggle.directive';
 import { CancelableEventArgs, CancelableBrowserEventArgs, cloneValue } from '../../core/utils';
 
@@ -116,6 +116,7 @@ export interface OverlayInfo {
     closeAnimationPlayer?: AnimationPlayer;
     openAnimationInnerPlayer?: any;
     closeAnimationInnerPlayer?: any;
+    ngZone: NgZone;
 }
 
 /** @hidden @internal */

src/app/overlay/overlay.sample.css

@@ -1,3 +1,7 @@
+.sample-content {
+    margin-bottom: 500px;
+}
+
 .radio-group {
     display: flex;
     flex-flow: column nowrap;
@@ -30,4 +34,10 @@
     margin: 20px;
     padding: 0 20px 20px 20px;
     background-color: #444444;
+}
+
+.outlet {
+    width: 600px;
+    height: 500px;
+    perspective: 1px;
 }

src/app/overlay/overlay.sample.html

@@ -58,6 +58,13 @@
                 <igx-switch class="settings" [(ngModel)]="modal" name="modal" [value]="modal"
                     (change)="onSwitchChange($event)">Modal</igx-switch>
             </div>
+            <div>
+                <igx-switch class="settings" [(ngModel)]="useOutlet" name="outlet" [value]="useOutlet"
+                    (change)="onSwitchChange($event)">Open in outlet</igx-switch>
+            </div>
+        </div>
+        <div #outlet class="outlet column">
+            Outlet
         </div>
         <button #button igxButton="raised" igxRipple igxDrag (click)="toggleDropDown()" [style.position]="'absolute'"
             (dragEnd)="onDragEnd($event)" (dragStart)="onDragStart($event)">Toggle</button>

src/app/overlay/overlay.sample.ts

@@ -61,11 +61,13 @@ export class OverlaySampleComponent implements OnInit {
 
     closeOnOutsideClick = true;
     modal = true;
+    useOutlet = false;
 
     @ViewChild(IgxDropDownComponent) public igxDropDown: IgxDropDownComponent;
     @ViewChild('button') public button: ElementRef;
     @ViewChild('container') public container: ElementRef;
     @ViewChild(IgxDragDirective) public igxDrag: IgxDragDirective;
+    @ViewChild('outlet') public outletElement: ElementRef;
 
     onChange(ev) {
         switch (ev.radio.name) {
@@ -210,6 +212,7 @@ export class OverlaySampleComponent implements OnInit {
             stringMapping['HorizontalDirection'][this.horizontalDirection];
         this._overlaySettings.positionStrategy.settings.horizontalStartPoint =
             stringMapping['HorizontalStartPoint'][this.horizontalStartPoint];
+        this._overlaySettings.outlet = this.useOutlet ? this.outletElement : null;
     }
 
     onSwitchChange(ev) {
@@ -220,6 +223,9 @@ export class OverlaySampleComponent implements OnInit {
             case 'modal':
                 this._overlaySettings.modal = ev.checked;
                 break;
+            case 'outlet':
+                this._overlaySettings.outlet = ev.checked ? this.outletElement : null;
+                break;
         }
     }