Angular flex-layout, grid size not working as expected

Question

Sorry if this is a really simple problem, just trying to get my head around angular flex grid.

I have this component

import { Component } from '@angular/core';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent  {
  name = 'Angular';


viewAreas: any[] =
    [{
      areaName: 'A',
      layoutSize: "70",
    },
      {
        areaName: 'B',
        layoutSize: "30"
      }
    ];
}

along with this template

<div fxLayout="row">
  <div *ngFor="let area of viewAreas" style="border: 2px solid red">
    <div [fxFlex.gt-sm]="area.layoutSize"
         [fxFlex.gt-xs]="area.layoutSize"
         [fxFlex]="area.layoutSize">
          {{area.areaName }} {{area.layoutSize }}
    </div>
  </div>
</div>

I would expect this to give me a row with 2 sections, 1 70% the width of the page and another 30% but I'm not getting that

You can see this here

https://stackblitz.com/edit/angular-umhsx2

If someone could tell me what i'm doing wrong it would be appreciated.

Answer 1

fxLayout="row"  

Works only with the direct child be

fxFlex.gt-*

So try the following code.

<div fxLayout="row">
    <div *ngFor="let area of viewAreas" style="border: 2px solid red" [fxFlex.gt-sm]="area.layoutSize"
         [fxFlex.gt-xs]="area.layoutSize"
         [fxFlex]="area.layoutSize">
          {{area.areaName }} {{area.layoutSize }}
  </div>
</div>