title: Angular 6 fxflex not working with ngif div (if div is shown fxflex is not applied on it)
body: <p>I am trying to use the fxFlex property with ngIf in angular 6, however, it is acting very strangely &amp; not giving the expected output.</p>
  
  <p><a href="https://stackblitz.com/edit/angular-f2gunh?file=app%2Fapp.component.html" rel="nofollow noreferrer">Here is a link to a demo showing the issue on stackblitz</a></p>
  
  <p>I expect it to look <a href="https://stackblitz.com/edit/angular-truwtf?file=app/app.component.html" rel="nofollow noreferrer">like this when it works correctly</a></p>
  
  <p>In that demo, in the first two inputs  I have tried two ways to put the fxflex on the inputs but it acts strangely on both, if I put the fxFlex on the ngIf div, it gives wrong size &amp; spacing:</p>
  
  <pre><code>&lt;div *ngIf="true" fxFlex = "20"&gt;
        &lt;mat-form-field &gt;
          &lt;input matInput name="dependentRelationship" placeholder="Relationship" [(ngModel)]="data.dependentRelationship"
            required&gt;
        &lt;/mat-form-field&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>it works correctly without the ngIf, giving the expected size &amp; spacing:</p>
  
  <pre><code>  &lt;mat-form-field fxFlex = "20"&gt;
      &lt;input matInput name="dependentRelationship" placeholder="Relationship" [(ngModel)]="data.dependentRelationship"
        required&gt;
    &lt;/mat-form-field&gt;
  </code></pre>
  
  <p>Can someone illustrate why fxFlex is not working as expected with the ngIf ?</p>