Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Angular Flex Layout - Not working

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 {

} 
like image 297
user1916077 Avatar asked Sep 25 '17 13:09

user1916077


People also ask

How do I use angular Flex layout?

Installation of Angular Flex-Layout Use the following command to use Angular Flex layouts in your projects. After installing flex layout we need to import flexLayoutModule in our app. module. ts file as shown below.

Is angular Flex layout deprecated?

2.0. This has been deprecated and removed.

How do I install Flex layout in angular 10?

From your project folder, run the following command to install Flex Layout: npm install @angular/flex-layout @10.0. 0-beta. 32.

Is angular Flex layout responsive?

Using Angular Flex layouts, we can create any HTML layouts that are responsive on all devices.


2 Answers

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.

enter image description here

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>
like image 73
Zaw Than oo Avatar answered Oct 10 '22 02:10

Zaw Than oo


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.

like image 32
dvanrensburg Avatar answered Oct 10 '22 02:10

dvanrensburg