Angular Flex Layout - Not working

Question

I tried to use 2.0.0-beta.9 in my app, a simple test doesn't work

<div fxLayout="row">
    <div>1. One</div> <div>2. Two</div> <div>3. Three</div> <div>4. Four</div>
</div>

displays columns instead of rows

I think I am importing the library properly

import {Component, NgModule} from '@angular/core'
import {BrowserModule} from '@angular/platform-browser'

import {FlexLayoutModule} from "@angular/flex-layout";

import {TestApp} from "./test-app";

@NgModule({
  imports: [ 
    BrowserModule,
    FlexLayoutModule
  ],
  declarations: [ TestApp ],
  bootstrap: [ TestApp ]
})
export class TestAppModule {

}

It should work... try to delete node_modules than run npm install and try again. — Mike Trinh
try to use angular version 4 which is latest beta is outdated — Aniruddha Das
you are missing 2 ";" import {Component, NgModule} from '@angular/core'; import {BrowserModule} from '@angular/platform-browser'; — Mike Trinh

Zaw Than oo Zaw Than oo · Accepted Answer · 2018-02-21T08:46:37

I also got like that problems when I install the lasted flex-layout module. The problems is directive name changes. In website, all of the directive are like layout, layout-xs, flex etc...

According to my solution, directive name are changed to fx + PascalCase.

Example

layout -> fxLayout
flex -> fxFlex
flex-order -> fxFlexOrder
flex-order-gt-md -> fxFlexOrder.gt-md

If you check Layout and Container, you will see as below image.

Change above source code to as the following, it is OK for me.

<div fxLayout="row">
    <div fxFlex>First item in row</div>
    <div fxFlex>Second item in row</div>
</div>
<div fxLayout="column">
    <div fxFlex>First item in column</div>
    <div fxFlex>Second item in column</div>
</div>

Angular Flex Layout - Not working

3 Answers