chore(*): Exposing event in the igxForOf to emit when the scrollbar visibility has changed and using it to recalc sizes as needed.

Author: MKirova

projects/igniteui-angular/src/lib/directives/for-of/for_of.directive.ts

@@ -181,6 +181,13 @@ export class IgxForOfDirective<T> implements OnInit, OnChanges, DoCheck, OnDestr
     @Output()
     public onChunkLoad = new EventEmitter<IForOfState>();
 
+    /**
+     * @hidden @internal
+     * An event that is emitted when scrollbar visibility has changed.
+     */
+    @Output()
+    public onScrollbarVisibilityChanged = new EventEmitter<any>();
+
     /**
      * An event that is emitted after the rendered content size of the igxForOf has been changed.
     */
@@ -1155,10 +1162,11 @@ export class IgxForOfDirective<T> implements OnInit, OnChanges, DoCheck, OnDestr
     protected _recalcScrollBarSize() {
         const count = this.isRemote ? this.totalItemCount : (this.igxForOf ? this.igxForOf.length : 0);
         this.dc.instance.notVirtual = !(this.igxForContainerSize && this.dc && this.state.chunkSize < count);
+        const scrollable = this.isScrollable();
         if (this.igxForScrollOrientation === 'horizontal') {
             const totalWidth = this.igxForContainerSize ? this.initSizesCache(this.igxForOf) : 0;
             this.scrollComponent.nativeElement.style.width = this.igxForContainerSize + 'px';
-            this.scrollComponent.nativeElement.children[0].style.width = totalWidth + 'px';
+            this.scrollComponent.size = totalWidth;
             if (totalWidth <= parseInt(this.igxForContainerSize, 10)) {
                 this.scrollPosition = 0;
             }
@@ -1170,6 +1178,10 @@ export class IgxForOfDirective<T> implements OnInit, OnChanges, DoCheck, OnDestr
                 this.scrollPosition = 0;
             }
         }
+        if (scrollable !== this.isScrollable()) {
+            // scrollbar visibility has changed
+            this.onScrollbarVisibilityChanged.emit();
+        }
     }
 
     protected _calcHeight(): number {

projects/igniteui-angular/src/lib/grids/grid-base.component.ts

@@ -3019,13 +3019,16 @@ export abstract class IgxGridBaseComponent extends DisplayDensityBase implements
             if (shouldRecalcSize) {
                 this.calculateGridHeight();
                 $event.containerSize = this.calcHeight;
-                // called to recalc all widths that may have changes as a result of
-                // the vert. scrollbar showing/hiding
-                this.notifyChanges(true);
             }
             this.evaluateLoadingState();
         });
 
+        this.verticalScrollContainer.onScrollbarVisibilityChanged.pipe(destructor, filter(() => !this._init)).subscribe(() => {
+            // called to recalc all widths that may have changes as a result of
+            // the vert. scrollbar showing/hiding
+            this.notifyChanges(true);
+        });
+
         this.verticalScrollContainer.onContentSizeChange.pipe(destructor, filter(() => !this._init)).subscribe(($event) => {
             this.calculateGridSizes();
         });