Kerby82
Kerby82

Reputation: 5146

Flex layout not working on angular 5

I'm trying to use flex-layout on angular 5 but it's not working.

This is my environment:

    _                      _                 ____ _     ___
   / \   _ __   __ _ _   _| | __ _ _ __     / ___| |   |_ _|
  / △ \ | '_ \ / _` | | | | |/ _` | '__|   | |   | |    | |
 / ___ \| | | | (_| | |_| | | (_| | |      | |___| |___ | |
/_/   \_\_| |_|\__, |\__,_|_|\__,_|_|       \____|_____|___|
               |___/

Angular CLI: 1.6.1
Node: 9.3.0
OS: darwin x64
Angular: 5.1.3
... animations, common, compiler, compiler-cli, core, forms
... http, language-service, platform-browser
... platform-browser-dynamic, router

@angular/cdk: 5.0.3
@angular/cli: 1.6.1
@angular/flex-layout: 2.0.0-beta.12-67e4bf5
@angular/material: 5.0.3
@angular-devkit/build-optimizer: 0.0.36
@angular-devkit/core: 0.0.22
@angular-devkit/schematics: 0.0.42
@ngtools/json-schema: 1.1.0
@ngtools/webpack: 1.9.1
@schematics/angular: 0.1.11
@schematics/schematics: 0.0.11
typescript: 2.4.2
webpack: 3.10.0

This is the import in app.module.ts:

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


@NgModule({
  imports: [
    BrowserModule,
    HttpClientModule,
    AppRoutingModule,
    FormsModule,
    ReactiveFormsModule,
    MaterialModule,
    SocialLoginModule,
    FlexLayoutModule
  ],

No error on compilation.

This is a test on a template:

<div class="container"
     fxLayout
     fxLayout.xs="column"
     fxLayoutAlign="center"
     fxLayoutGap="10px"
     fxLayoutGap.xs="0">
  <div class="item item-1" fxFlex="15%">Item 1</div>
  <div class="item item-2" fxFlex="20%" fxFlexOrder="3">Item 2</div>
  <div class="item item-3" fxFlex>Item 3</div>
</div>

<div class="container"
     fxLayout
     fxLayout.xs="column"
     fxLayoutAlign="center"
     fxLayoutGap="10px"
     fxLayoutGap.xs="0">
  <div class="item item-4" fxFlex fxFlexOffset="50px"  fxFlexOffset.xs="0">Item 4</div>
  <div class="item item-5" fxFlex="200px">Item 5</div>
</div>

This is the result (not what expected):

enter image description here

Upvotes: 12

Views: 16245

Answers (3)

Mehdi Benmoha
Mehdi Benmoha

Reputation: 3935

You have to import FlexLayoutModule in every feature module. This is not the best solution, but a working one.

Importing and EXPORTING FlexLayoutModule in the SharedModule works like charm and is the best solution that respects the angular style guide, by the way the SharedModule is imported in every feature module.

For more information about the SharedModule: https://angular.io/guide/styleguide#shared-feature-module

Edit: I also wrote an article about SharedModule vs CoreModule if you can't see the difference between them: https://medium.com/@benmohamehdi/angular-best-practices-coremodule-vs-sharedmodule-25f6721aa2ef

Upvotes: 31

Md. Imrul Islam
Md. Imrul Islam

Reputation: 318

Install Flex Layout from npm: $ npm install @angular/flex-layout --save

Or with Yarn: $ yarn add @angular/flex-layout

Now import FlexLayoutModule in your app module

import { FlexLayoutModule } from "@angular/flex-layout";
@NgModule({
  imports: [
    BrowserModule,
    FlexLayoutModule
  ],
  // ...
})
export class AppModule {}

Flex Layout is now ready to be used in your templates.

Upvotes: -2

Iron shield
Iron shield

Reputation: 349

Add the following to the package.json file:

"@angular/flex-layout": "^6.0.0-beta.15",
"rxjs": "^6.1.0",
"@angular/cdk": "^6.0.0",
"rxjs-compat": "6.0.0-beta.1",

and run

npm install

Upvotes: 3

Related Questions