perf: remove duplicate function calls (#773)

* remove duplicate initialization calls in most directives * remove `getDisplayStyle` call from BaseDirective `ngOnInit` Fixes #761
angular · Jul 25, 2018 · bc7f77f · bc7f77f
1 parent 4fb0979
commit bc7f77f
Show file tree

Hide file tree

Showing 7 changed files with 7 additions and 20 deletions.
diff --git a/src/lib/core/base/base.ts b/src/lib/core/base/base.ts
@@ -80,7 +80,6 @@ export abstract class BaseDirective implements OnDestroy, OnChanges {
    * querying such as computed Display style
    */
   ngOnInit() {
-    this._display = this._getDisplayStyle();
     this._hasInitialized = true;
   }
 
@@ -227,9 +226,6 @@ export abstract class BaseDirective implements OnDestroy, OnChanges {
     return this._hasInitialized;
   }
 
-  /** Original dom Elements CSS display style */
-  protected _display;
-
   /** MediaQuery Activation Tracker */
   protected _mqActivation: ResponsiveActivation;
 

diff --git a/src/lib/extended/show-hide/show-hide.ts b/src/lib/extended/show-hide/show-hide.ts
@@ -67,6 +67,9 @@ export class ShowHideDirective extends BaseDirective implements OnInit, OnChange
    */
   protected _layoutWatcher: Subscription;
 
+  /** Original dom Elements CSS display style */
+  protected _display: string;
+
   /* tslint:disable */
   @Input('fxShow')       set show(val) {  this._cacheInput('show', val);  }
   @Input('fxShow.xs')    set showXs(val) {this._cacheInput('showXs', val);}
@@ -101,11 +104,8 @@ export class ShowHideDirective extends BaseDirective implements OnInit, OnChange
   @Input('fxHide.gt-sm') set hideGtSm(val) {this._cacheInput('showGtSm', negativeOf(val)); };
   @Input('fxHide.gt-md') set hideGtMd(val) {this._cacheInput('showGtMd', negativeOf(val)); };
   @Input('fxHide.gt-lg') set hideGtLg(val) {this._cacheInput('showGtLg', negativeOf(val)); };
-
   /* tslint:enable */
-  /**
-   *
-   */
+
   constructor(monitor: MediaMonitor,
               @Optional() @Self() protected layout: LayoutDirective,
               protected elRef: ElementRef,
@@ -155,6 +155,7 @@ export class ShowHideDirective extends BaseDirective implements OnInit, OnChange
    */
   ngOnInit() {
     super.ngOnInit();
+    this._display = this._getDisplayStyle();
 
     let value = this._getDefaultVal('show', true);
     // Build _mqActivation controller

diff --git a/src/lib/flex/flex-align/flex-align.ts b/src/lib/flex/flex-align/flex-align.ts
@@ -81,7 +81,6 @@ export class FlexAlignDirective extends BaseDirective implements OnInit, OnChang
     this._listenForMediaQueryChanges('align', 'stretch', (changes: MediaChange) => {
       this._updateWithValue(changes.value);
     });
-    this._updateWithValue();
   }
 
   // *********************************************

diff --git a/src/lib/flex/flex-order/flex-order.ts b/src/lib/flex/flex-order/flex-order.ts
@@ -78,7 +78,6 @@ export class FlexOrderDirective extends BaseDirective implements OnInit, OnChang
     this._listenForMediaQueryChanges('order', '0', (changes: MediaChange) => {
       this._updateWithValue(changes.value);
     });
-    this._updateWithValue();
   }
 
   // *********************************************

diff --git a/src/lib/flex/flex/flex.ts b/src/lib/flex/flex/flex.ts
@@ -116,7 +116,6 @@ export class FlexDirective extends BaseDirective implements OnInit, OnChanges, O
     this._listenForMediaQueryChanges('flex', '', (changes: MediaChange) => {
       this._updateStyle(changes.value);
     });
-    this._updateStyle();
 
     if (this._container) {
       // If this flex item is inside of a flex container marked with

diff --git a/src/lib/flex/layout-align/layout-align.ts b/src/lib/flex/layout-align/layout-align.ts
@@ -94,7 +94,6 @@ export class LayoutAlignDirective extends BaseDirective implements OnInit, OnCha
     this._listenForMediaQueryChanges('align', 'start stretch', (changes: MediaChange) => {
       this._updateWithValue(changes.value);
     });
-    this._updateWithValue();
   }
 
   ngOnDestroy() {

diff --git a/src/lib/flex/layout/layout.ts b/src/lib/flex/layout/layout.ts
@@ -68,11 +68,8 @@ export class LayoutDirective extends BaseDirective implements OnInit, OnChanges,
   @Input('fxLayout.lt-md') set layoutLtMd(val) { this._cacheInput('layoutLtMd', val); };
   @Input('fxLayout.lt-lg') set layoutLtLg(val) { this._cacheInput('layoutLtLg', val); };
   @Input('fxLayout.lt-xl') set layoutLtXl(val) { this._cacheInput('layoutLtXl', val); };
-
   /* tslint:enable */
-  /**
-   *
-   */
+
   constructor(monitor: MediaMonitor,
               elRef: ElementRef,
               styleUtils: StyleUtils) {
@@ -106,16 +103,13 @@ export class LayoutDirective extends BaseDirective implements OnInit, OnChanges,
     this._listenForMediaQueryChanges('layout', 'row', (changes: MediaChange) => {
       this._updateWithDirection(changes.value);
     });
-    this._updateWithDirection();
   }
 
   // *********************************************
   // Protected methods
   // *********************************************
 
-  /**
-   * Validate the direction value and then update the host's inline flexbox styles
-   */
+  /** Validate the direction value and then update the host's inline flexbox styles */
   protected _updateWithDirection(value?: string) {
     value = value || this._queryInput('layout') || 'row';
     if (this._mqActivation) {