Angular Flex Layout - not working

Question

I tried using 2.0.0-beta.9 in my application, a simple test does not 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'm importing the library correctly

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 {

} 

Answer 1

I also had such problems when I install the last flex-layoutmodule. Problems are a change of directive . In the website all the directive is similar to the layout, layout-xs, flexetc.

According to my decision, the name directivehas changed to fx + PascalCase.

Example

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

If you check the Layout and the container , you will see the image below.

Change the source code to the following, this is normal 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>

Answer 2

, , .

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

Answer 3

, :

Make sure your project actually compiles!

If you have an error and the project does not compile, then HTML changes will not be shown, including added directives. Therefore, if you add directive to existing code and do not see changes, make sure that compilation is completed.

Don't mess with names

-Use fxLayoutnotfxFlexLayout

-Use fxLayoutAlignnotfxFlexLayoutAlign