fix(style): apply correct flex with ngStyle and layout change

#700

Author: Teamop

src/lib/extended/style/style.ts

@@ -109,6 +109,22 @@ export class StyleDirective extends BaseDirective
     if (this._base.activeKey in changes) {
       this._ngStyleInstance.ngStyle = this._base.mqActivation.activatedInput || '';
     }
+
+    // Fix for issue 700
+    const currentStyleBase = this._getAttributeValue('style');
+    if (!currentStyleBase.includes(this._base.queryInput(this._base.activeKey))) {
+      this.ngStyleBase = currentStyleBase || '';
+      Object.getOwnPropertyNames(this._base.inputMap).forEach((input) => {
+        if (input !== this._base.activeKey) {
+          Object.getOwnPropertyNames(this._base.inputMap[input]).forEach((style) => {
+            if (currentStyleBase.includes(style)) {
+              delete this._base.inputMap[input][style];
+            }
+          });
+          this._base.cacheInput(input, this._base.inputMap[input], true)
+        }
+      });
+    }
   }
 
 

src/lib/flex/flex/flex.spec.ts

@@ -75,6 +75,34 @@ describe('flex directive', () => {
       expectEl(dom).toHaveStyle({'flex': '1 1 0%'}, styler);
     });
 
+    it('should add correct styles for `fxFlex` and ngStyle with layout change', () => {
+      componentWithTemplate(`
+        <div fxLayout="row wrap" fxLayoutAlign="start center">
+          <div *ngIf="true" fxFlex="10 1 auto" [ngStyle.lt-md]="{'width.px': 15}"></div>
+        </div>
+      `);
+      fixture.detectChanges();
+      matchMedia.activate('sm', true);
+      let element = queryFor(fixture, '[fxFlex]')[0];
+      expectEl(element).toHaveStyle({'width': '15px'}, styler);
+      expectEl(element).toHaveStyle({'box-sizing': 'border-box'}, styler);
+      expectEl(element).toHaveStyle({'flex': '10 1 auto'}, styler);
+    });
+
+    it('should add correct styles for `fxFlex` and ngStyle without layout change', () => {
+      componentWithTemplate(`
+        <div fxLayout="row wrap" fxLayoutAlign="start center">
+          <div fxFlex="10 1 auto" [ngStyle.lt-md]="{'width.px': 15}"></div>
+        </div>
+      `);
+      fixture.detectChanges();
+      matchMedia.activate('sm', true);
+      let element = queryFor(fixture, '[fxFlex]')[0];
+      expectEl(element).toHaveStyle({'width': '15px'}, styler);
+      expectEl(element).toHaveStyle({'box-sizing': 'border-box'}, styler);
+      expectEl(element).toHaveStyle({'flex': '10 1 auto'}, styler);
+    });
+
     it('should apply `fxGrow` value to flex-grow when used default `fxFlex`', () => {
       componentWithTemplate(`<div fxFlex fxGrow="10"></div>`);
       fixture.detectChanges();