fxFlex angular flex layout not working as expected version 7.0.0-beta.19

Question

Todo :

• I want to have grid colum using flex layout:

• I tried with two differents version of flex layout
  and it working fine using the version: 5.0.0-beta.13
  See this stackblitz: https://stackblitz.com/edit/angular-flex-layout-seed-working-flex

  But not working with version 7.0.0-beta.19 or 6.x.x
  See here: https://stackblitz.com/edit/angular-fx-layout-testing

Here is my code and what i tried:

<div fxLayout="row wrap" fxLayoutGap="32px" fxLayoutAlign="start start">
  <ng-container *ngFor="let _ of [1,2,3,4,5,6]">
    <p fxFlex="0 1 calc(33.3% - 32px)">Flex</p>
  </ng-container>
</div>

The documentation not provide a breaking change inside the api.
Has someone an idea what is going wrong here ?
or should i open an issue on github ?

Answer 1

You forgot to import FlexLayoutModule in app.module.ts

import { FlexLayoutModule } from '@angular/flex-layout';
import { AppComponent } from './app.component';
import { HelloComponent } from './hello.component';

@NgModule({
  imports:      [ BrowserModule, FormsModule, FlexLayoutModule ],
  declarations: [ AppComponent, HelloComponent ],
  bootstrap:    [ AppComponent ]
})
export class AppModule { }