Angular Flex Layout - Not working

user_1916077 0
Viewed 29920

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 {

}
angular-flex-layout angular
3 Answers

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.

user_18080480

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

Simon_169400
Related