fix(fxLayoutGap): not working with dynamic fxHide (#983)

Author: CaerusKaru

src/lib/core/base/base2.ts

@@ -107,10 +107,7 @@ export abstract class BaseDirective2 implements OnChanges, OnDestroy {
 
   /** Force trigger style updates on DOM element */
   protected triggerUpdate() {
-    const val = this.marshal.getValue(this.nativeElement, this.DIRECTIVE_KEY);
-    if (val !== undefined) {
-      this.marshal.updateElement(this.nativeElement, this.DIRECTIVE_KEY, val);
-    }
+    this.marshal.triggerUpdate(this.nativeElement, this.DIRECTIVE_KEY);
   }
 
   /**

src/lib/core/media-marshaller/media-marshaller.spec.ts

@@ -102,6 +102,17 @@ describe('media-marshaller', () => {
       expect(triggered).toBeTruthy();
     });
 
+    it('should triggerUpdate', () => {
+      let triggered = false;
+      const builder = () => {
+        triggered = true;
+      };
+      mediaMarshaller.init(fakeElement, fakeKey, builder);
+      mediaMarshaller.setValue(fakeElement, fakeKey, 0, '');
+      mediaMarshaller.triggerUpdate(fakeElement, fakeKey);
+      expect(triggered).toBeTruthy();
+    });
+
     it('should get the right value', () => {
       const builder = () => {
       };
@@ -233,6 +244,17 @@ describe('media-marshaller', () => {
       expect(triggered).toBeTruthy();
     });
 
+    it('should triggerUpdate', () => {
+      let triggered = false;
+      const builder = () => {
+        triggered = true;
+      };
+      mediaMarshaller.init(fakeElement, fakeKey, builder);
+      mediaMarshaller.setValue(fakeElement, fakeKey, 0, '');
+      mediaMarshaller.triggerUpdate(fakeElement, fakeKey);
+      expect(triggered).toBeTruthy();
+    });
+
     it('should get the right value', () => {
       const builder = () => {
       };

src/lib/core/media-marshaller/media-marshaller.ts

@@ -247,6 +247,25 @@ export class MediaMarshaller {
     }
   }
 
+  /**
+   * trigger an update for a given element and key (e.g. layout)
+   * @param element
+   * @param key
+   */
+  triggerUpdate(element: HTMLElement, key?: string): void {
+    const bpMap = this.elementMap.get(element);
+    if (bpMap) {
+      const valueMap = this.getActivatedValues(bpMap, key);
+      if (valueMap) {
+        if (key) {
+          this.updateElement(element, key, valueMap.get(key));
+        } else {
+          valueMap.forEach((v, k) => this.updateElement(element, k, v));
+        }
+      }
+    }
+  }
+
   /** Cross-reference for HTMLElement with directive key */
   private buildElementKeyMap(element: HTMLElement, key: string) {
     let keyMap = this.elementKeyMap.get(element);

src/lib/extended/show-hide/show-hide.ts

@@ -150,6 +150,7 @@ export class ShowHideDirective extends BaseDirective2 implements AfterViewInit,
     if (isPlatformServer(this.platformId) && this.serverModuleLoaded) {
       this.nativeElement.style.setProperty('display', '');
     }
+    this.marshal.triggerUpdate(this.parentElement!, 'layout-gap');
   }
 }
 

src/lib/flex/layout-gap/layout-gap.spec.ts

@@ -410,6 +410,29 @@ describe('layout-gap directive', () => {
       expectEl(nodes[2]).not.toHaveStyle({'margin-bottom': '*'}, styler);
     });
 
+    it('should work with dynamic fxHide', () => {
+      let template = `
+        <div fxLayout="row" fxLayoutGap="10px">
+          <div fxFlex>A</div>
+          <div fxFlex [fxHide]="shouldHide">B</div>
+        </div>
+      `;
+      createTestComponent(template);
+      fixture.detectChanges();
+
+      let nodes = queryFor(fixture, '[fxFlex]');
+      expect(nodes.length).toEqual(2);
+      expectEl(nodes[0]).not.toHaveStyle({'margin-right': '*'}, styler);
+      expectEl(nodes[1]).not.toHaveStyle({'margin-right': '*'}, styler);
+
+      let instance = fixture.componentInstance;
+      instance.shouldHide = false;
+      fixture.detectChanges();
+
+      expectEl(nodes[0]).toHaveStyle({'margin-right': '10px'}, styler);
+      expectEl(nodes[1]).not.toHaveStyle({'margin-right': '*'}, styler);
+    });
+
     it('should work with responsive fxHide', () => {
       let template = `
         <div fxLayoutAlign="center center" fxLayoutGap="13px">
@@ -557,6 +580,7 @@ export class MockLayoutGapStyleBuilder extends StyleBuilder {
 class TestLayoutGapComponent implements OnInit {
   direction = 'column';
   gap = '8px';
+  shouldHide = true;
   rows = new Array(4);
 
   constructor() {

src/lib/flex/layout-gap/layout-gap.ts

@@ -66,15 +66,15 @@ export class LayoutGapStyleBuilder extends StyleBuilder {
       const paddingStyles = buildGridPadding(gapValue, parent.directionality);
       this._styler.applyStyleToElements(paddingStyles, parent.items);
     } else {
-      const lastItem = items.pop();
+      const lastItem = items.pop()!;
 
       // For each `element` children EXCEPT the last,
       // set the margin right/bottom styles...
       const gapCss = buildGapCSS(gapValue, parent);
       this._styler.applyStyleToElements(gapCss, items);
 
       // Clear all gaps for all visible elements
-      this._styler.applyStyleToElements(CLEAR_MARGIN_CSS, [lastItem!]);
+      this._styler.applyStyleToElements(CLEAR_MARGIN_CSS, [lastItem]);
     }
   }
 }