fix(flex): wait for parent element until template is initialized (#1237)

Author: CaerusKaru

src/lib/core/base/base2.ts

@@ -132,6 +132,10 @@ export abstract class BaseDirective2 implements OnChanges, OnDestroy {
     return 'row';
   }
 
+  protected hasWrap(target: HTMLElement): boolean {
+    return this.styler.hasWrap(target);
+  }
+
   /** Applies styles given via string pair or object map to the directive element */
   protected applyStyleToElement(style: StyleDefinition,
                                 value?: string | number,

src/lib/core/style-utils/style-utils.ts

@@ -60,6 +60,11 @@ export class StyleUtils {
     return [value || 'row', hasInlineValue];
   }
 
+  hasWrap(target: HTMLElement): boolean {
+    const query = 'flex-wrap';
+    return this.lookupStyle(target, query) === 'wrap';
+  }
+
   /**
    * Find the DOM element's raw attribute value (if any)
    */

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

@@ -98,6 +98,26 @@ describe('flex directive', () => {
       expectEl(element).toHaveStyle({'flex': '10 1 auto'}, styler);
     });
 
+    it('should add correct styles for `fxFlex` with NgForOf', () => {
+      componentWithTemplate(`
+        <div [fxLayout]="direction">
+          <div *ngFor="let el of els" fxFlex="50"></div>
+        </div>
+      `);
+      fixture.componentInstance.direction = 'row';
+      fixture.detectChanges();
+      let element = queryFor(fixture, '[fxFlex]')[0];
+      expectEl(element).toHaveStyle({'max-width': '50%'}, styler);
+      expectEl(element).toHaveStyle({'box-sizing': 'border-box'}, styler);
+      expectEl(element).toHaveStyle({'flex': '1 1 100%'}, styler);
+      fixture.componentInstance.direction = 'column';
+      fixture.detectChanges();
+      element = queryFor(fixture, '[fxFlex]')[0];
+      expectEl(element).toHaveStyle({'max-height': '50%'}, styler);
+      expectEl(element).toHaveStyle({'box-sizing': 'border-box'}, styler);
+      expectEl(element).toHaveStyle({'flex': '1 1 100%'}, styler);
+    });
+
     it('should add correct styles for `fxFlex` and ngStyle without layout change', () => {
       // NOTE: the presence of ngIf on the child element is imperative for detecting issue 700
       componentWithTemplate(`
@@ -119,6 +139,7 @@ describe('flex directive', () => {
           <div fxFlex="30"></div>
         </div>
       `);
+      fixture.debugElement.componentInstance.direction = 'column';
       fixture.detectChanges();
       let element = queryFor(fixture, '[fxFlex]')[0];
       expectNativeEl(fixture).toHaveStyle({'flex-direction': 'column'}, styler);
@@ -1088,6 +1109,7 @@ export class MockFlexStyleBuilder extends StyleBuilder {
 })
 class TestFlexComponent {
   direction = 'column';
+  els = new Array(5);
 }
 
 @Component({

src/lib/flex/flex/flex.ts

@@ -5,7 +5,7 @@
  * Use of this source code is governed by an MIT-style license that can be
  * found in the LICENSE file at https://angular.io/license
  */
-import {Directive, ElementRef, Inject, Injectable, Input} from '@angular/core';
+import {Directive, ElementRef, Inject, Injectable, Input, OnInit} from '@angular/core';
 import {
   BaseDirective2,
   LayoutConfigOptions,
@@ -200,11 +200,11 @@ const selector = `
  * @see https://css-tricks.com/snippets/css/a-guide-to-flexbox/
  */
 @Directive()
-export class FlexDirective extends BaseDirective2 {
+export class FlexDirective extends BaseDirective2 implements OnInit {
 
   protected DIRECTIVE_KEY = 'flex';
-  protected direction = '';
-  protected wrap = false;
+  protected direction?: string = undefined;
+  protected wrap?: boolean = undefined;
 
 
   @Input('fxShrink')
@@ -228,9 +228,12 @@ export class FlexDirective extends BaseDirective2 {
               styleUtils: StyleUtils,
               @Inject(LAYOUT_CONFIG) protected layoutConfig: LayoutConfigOptions,
               styleBuilder: FlexStyleBuilder,
-              marshal: MediaMarshaller) {
+              protected marshal: MediaMarshaller) {
     super(elRef, styleBuilder, styleUtils, marshal);
     this.init();
+  }
+
+  ngOnInit() {
     if (this.parentElement) {
       this.marshal.trackValue(this.parentElement, 'layout')
         .pipe(takeUntil(this.destroySubject))
@@ -256,9 +259,12 @@ export class FlexDirective extends BaseDirective2 {
   /** Input to this is exclusively the basis input value */
   protected updateWithValue(value: string) {
     const addFlexToParent = this.layoutConfig.addFlexToParent !== false;
-    if (!this.direction) {
+    if (this.direction === undefined) {
       this.direction = this.getFlexFlowDirection(this.parentElement!, addFlexToParent);
     }
+    if (this.wrap === undefined) {
+      this.wrap = this.hasWrap(this.parentElement!);
+    }
     const direction = this.direction;
     const isHorizontal = direction.startsWith('row');
     const hasWrap = this.wrap;