Merge pull request #5930 from IgniteUI/ddimitrov/fix-5582-8.2.x

Add resize observers for tabs

Author: DiyanDimitrov

projects/igniteui-angular/src/lib/tabs/tab-item.component.ts

@@ -6,20 +6,23 @@ import {
     HostListener,
     Input,
     TemplateRef,
-    ViewChild
+    ViewChild,
+    NgZone,
+    AfterViewInit,
+    OnDestroy
 } from '@angular/core';
 
 import { IgxTabsGroupComponent } from './tabs-group.component';
 import { IgxTabItemBase, IgxTabsBase } from './tabs.common';
 import { IgxTabItemTemplateDirective } from './tabs.directives';
+import ResizeObserver from 'resize-observer-polyfill';
 
 @Component({
     selector: 'igx-tab-item',
     templateUrl: 'tab-item.component.html'
 })
 
-export class IgxTabItemComponent extends IgxTabItemBase {
-
+export class IgxTabItemComponent extends IgxTabItemBase implements AfterViewInit, OnDestroy {
     /**
     * Gets the group associated with the tab.
     * ```html
@@ -82,8 +85,9 @@ export class IgxTabItemComponent extends IgxTabItemBase {
     private _changesCount = 0; // changes and updates accordingly applied to the tab.
     private _isSelected = false;
     private _disabled = false;
+    private _resizeObserver: ResizeObserver;
 
-    constructor(private _tabs: IgxTabsBase, private _element: ElementRef) {
+    constructor(private _tabs: IgxTabsBase, private _element: ElementRef, private _ngZone: NgZone) {
         super();
         this._nativeTabItem = _element;
     }
@@ -145,6 +149,20 @@ export class IgxTabItemComponent extends IgxTabItemBase {
     @HostBinding('attr.aria-controls')
     public ariaControls = 'igx-tab-item-group-' + this.index;
 
+    ngAfterViewInit(): void {
+        this._ngZone.runOutsideAngular(() => {
+            this._resizeObserver = new ResizeObserver(() => {
+                this._tabs.transformIndicatorAnimation(this._nativeTabItem.nativeElement, 0);
+            });
+        });
+    }
+
+    ngOnDestroy(): void {
+        this._ngZone.runOutsideAngular(() => {
+            this._resizeObserver.disconnect();
+        });
+    }
+
     /**
      * @hidden
      */
@@ -153,16 +171,6 @@ export class IgxTabItemComponent extends IgxTabItemBase {
         this.select();
     }
 
-    /**
-     * @hidden
-     */
-    @HostListener('window:resize', ['$event'])
-    public onResize(event) {
-        if (this.isSelected) {
-            this._tabs.transformIndicatorAnimation(this.nativeTabItem.nativeElement);
-        }
-    }
-
     /**
      * @hidden
      */
@@ -269,6 +277,15 @@ export class IgxTabItemComponent extends IgxTabItemBase {
      */
     public setSelectedInternal(newValue: boolean) {
         this._isSelected = newValue;
+        this._ngZone.runOutsideAngular(() => {
+            if (this._resizeObserver) {
+                if (this._isSelected) {
+                    this._resizeObserver.observe(this._element.nativeElement);
+                } else {
+                    this._resizeObserver.disconnect();
+                }
+            }
+        });
         this.tabindex = newValue ? 0 : -1;
     }
 

projects/igniteui-angular/src/lib/tabs/tabs-group.component.ts

@@ -93,13 +93,6 @@ export class IgxTabsGroupComponent extends IgxTabsGroupBase implements AfterCont
     @HostBinding('class.igx-tabs__group')
     public styleClass = true;
 
-    @HostListener('window:resize', ['$event'])
-    public onResize(event) {
-        if (this.isSelected) {
-            this._tabs.transformContentAnimation(this.relatedTab, 0);
-        }
-    }
-
     /**
      * An accessor that returns the `IgxTabItemComponent` component.
      * ```typescript

projects/igniteui-angular/src/lib/tabs/tabs.common.ts

@@ -17,7 +17,7 @@ export abstract class IgxTabsBase {
     scrollElement(element: any, scrollRight: boolean) {}
     performSelectionChange(newTab: IgxTabItemBase) {}
     transformContentAnimation(tab: IgxTabItemBase, duration: number) {}
-    transformIndicatorAnimation(element: HTMLElement) {}
+    transformIndicatorAnimation(element: HTMLElement, duration?: number) {}
 }
 
 /** @hidden */

projects/igniteui-angular/src/lib/tabs/tabs.component.ts

@@ -13,7 +13,8 @@ import {
     QueryList,
     ViewChild,
     ViewChildren,
-    OnDestroy
+    OnDestroy,
+    NgZone
 } from '@angular/core';
 import { Subscription } from 'rxjs';
 import { IgxBadgeModule } from '../badge/badge.component';
@@ -23,6 +24,7 @@ import { IgxTabItemComponent } from './tab-item.component';
 import { IgxTabsGroupComponent } from './tabs-group.component';
 import { IgxLeftButtonStyleDirective, IgxRightButtonStyleDirective, IgxTabItemTemplateDirective } from './tabs.directives';
 import { IgxTabsBase, IgxTabItemBase } from './tabs.common';
+import ResizeObserver from 'resize-observer-polyfill';
 
 export enum TabsType {
     FIXED = 'fixed',
@@ -228,6 +230,7 @@ export class IgxTabsComponent implements IgxTabsBase, AfterViewInit, OnDestroy {
 
     private _groupChanges$: Subscription;
     private _selectedIndex = -1;
+    private _resizeObserver: ResizeObserver;
 
     /**
      * @hidden
@@ -295,7 +298,7 @@ export class IgxTabsComponent implements IgxTabsBase, AfterViewInit, OnDestroy {
         }
     }
 
-    constructor(private _element: ElementRef) {
+    constructor(private _element: ElementRef, private _ngZone: NgZone) {
     }
 
     /**
@@ -326,6 +329,17 @@ export class IgxTabsComponent implements IgxTabsBase, AfterViewInit, OnDestroy {
         this._groupChanges$ = this.groups.changes.subscribe(() => {
             this.resetSelectionOnCollectionChanged();
         });
+
+        this._ngZone.runOutsideAngular(() => {
+            this._resizeObserver = new ResizeObserver(() => {
+                if (!this.hasContentTabs && this._selectedIndex >= 0 && this._selectedIndex < this.tabs.length) {
+                    const newTab = this.tabs.toArray()[this._selectedIndex];
+                    this.transformContentAnimation(newTab, 0);
+                }
+            });
+
+            this._resizeObserver.observe(this.tabsContainer.nativeElement);
+        });
     }
 
     /**
@@ -335,6 +349,10 @@ export class IgxTabsComponent implements IgxTabsBase, AfterViewInit, OnDestroy {
         if (this._groupChanges$) {
             this._groupChanges$.unsubscribe();
         }
+
+        this._ngZone.runOutsideAngular(() => {
+            this._resizeObserver.disconnect();
+        });
     }
 
     private resetSelectionOnCollectionChanged(): void {
@@ -445,16 +463,17 @@ export class IgxTabsComponent implements IgxTabsBase, AfterViewInit, OnDestroy {
     // animation for the new panel/group (not needed for tab only mode)
     public transformContentAnimation(tab: IgxTabItemBase, duration: number): void {
         const contentOffset = this.tabsContainer.nativeElement.offsetWidth * tab.index;
-        this.contentsContainer.nativeElement.style.transitionDuration = `${duration}s`;
+        this.contentsContainer.nativeElement.style.transitionDuration = duration > 0 ? `${duration}s` : 'initial';
         this.contentsContainer.nativeElement.style.transform = `translate(${-contentOffset}px)`;
     }
 
     /**
      * @hidden
      */
-    public transformIndicatorAnimation(element: HTMLElement): void {
+    public transformIndicatorAnimation(element: HTMLElement, duration = 0.3): void {
         if (this.selectedIndicator) {
             this.selectedIndicator.nativeElement.style.visibility = 'visible';
+            this.selectedIndicator.nativeElement.style.transitionDuration = duration > 0 ? `${duration}s` : 'initial';
             this.selectedIndicator.nativeElement.style.width = `${element.offsetWidth}px`;
             this.selectedIndicator.nativeElement.style.transform = `translate(${element.offsetLeft}px)`;
         }