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, Sep 25 '17 at 13:17
try to use angular version 4 which is latest beta is outdated — Aniruddha Das, Sep 25 '17 at 13:18
you are missing 2 ";" import {Component, NgModule} from '@angular/core'; import {BrowserModule} from '@angular/platform-browser'; — Mike Trinh, Sep 25 '17 at 13:18

Zaw Than oo · Answer 1 · 2018-02-21T09:12:08.563

13

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>

edited Feb 21 '18 at 09:12

answered Feb 21 '18 at 08:46

Zaw Than oo

9,651
13
83
131

1

This worked for me! Not sure why the documentation is wrong on the angular site. I couldn't get the angular project to compile unless I used "@angular/flex-layout": "^7.0.0-beta.24", in the package.json – mike gold May 26 '19 at 23:13
The website you have linked to is for AngularJS Material. For Angular (2+) refer to the [wiki](https://github.com/angular/flex-layout/wiki) for **@angular/flex-layout**. – JayChase Jul 23 '19 at 09:15
thank you! Worked for me. Strange that the documentation is wrong – GrahamJRoy Sep 15 '20 at 10:39

score 11 · Answer 2 · answered Aug 13 '20 at 03:35

I ran into this issue too and the cause was me using multiple modules and I forgot to import the FlexLayoutModule in my "PagesModule" modules.

It would work on the main page because it was imported at the top level (AppModule) and not on the child modules.

Importing it in the "PagesModule" and restarting the development server fixed it for me.

Simon_Weaver · Answer 3 · 2019-01-18T11:09:59.387

This is more of a generic problem, but catches me once in a while:

Make sure your project is actually compiling!

If you have an error and the project doesn't compile, then HTML changes won't be shown - which includes directives being added. So if you add a directive to existing code and don't see the change make sure your compile completes.

Don't get muddled up with the names

-Use fxLayout and not fxFlexLayout

-Use fxLayoutAlign and not fxFlexLayoutAlign

Angular Flex Layout - Not working

3 Answers3