Skip to content

Webpack Configuration

Jump to bottom
Alessio Bianchini edited this page Dec 17, 2025 · 3 revisions

Install the Angular Flex-Layout Library

npm install --save ng-flex-layout

or...

yarn add ng-flex-layout

or:

pnpm add ng-flex-layout

Import the Angular Flex-Layout Module

app.module.ts

...
import {NgModule} from '@angular/core';
import {FlexLayoutModule} from 'ng-flex-layout';
...

@NgModule({
  imports: [
    ...
    FlexLayoutModule
  ],
  ...
})
export class AppModule {}

Validate Your Configuration

Add the code below into an existing component (or add something similar) to verify Angular Flex-Layout has been properly imported into your application.

home.component.html

<div class="flexDemoContainer">
  <div fxLayout="row" fxLayout.xs="column" fxLayout.sm="column" fxFlex>
    <div fxFlex> I'm above on mobile, and left on larger devices. </div>
    <div fxFlex> I'm below on mobile, and right on larger devices. </div>
  </div>
</div>

home.component.css

.flexDemoContainer {
  border: solid 1px #red;
  box-sizing: content-box !important;
}

                   -   API Documentation   -   StackBlitz Template   -   Live Demos

Clone this wiki locally