Skip to content

Fast Starts

Jump to bottom
Alessio Bianchini edited this page Jun 17, 2026 · 4 revisions

Install from npm

npm install --save ng-flex-layout

or with pnpm:

pnpm add ng-flex-layout

Next, modify your app.module.ts to use the FlexLayoutModule:

import {NgModule}         from '@angular/core';
import {BrowserModule}    from '@angular/platform-browser';
import {FlexLayoutModule} from "ng-flex-layout";

import {DemoAppComponent}          from './demo-app/demo-app';

@NgModule({
  declarations: [DemoAppComponent],
  bootstrap: [DemoAppComponent],
  imports: [
    BrowserModule,
    FlexLayoutModule,
  ]
})
export class DemoAppModule {}

1) Angular CLI + npm + ng-flex-layout

If you are using the Angular CLI to bundle and serve your application (using ng serve), run the following command:

npm install --save ng-flex-layout

Next, modify your app.module.ts to use the FlexLayoutModule:

import {NgModule} from '@angular/core';
import {BrowserModule} from '@angular/platform-browser';
import {FlexLayoutModule} from "ng-flex-layout";

import {DemoAppComponent} from './demo-app/demo-app';

@NgModule({
  declarations: [DemoAppComponent],
  bootstrap: [DemoAppComponent],
  imports: [
    BrowserModule,
    FlexLayoutModule
  ]
})
export class DemoAppModule {}

2) Angular Standalone Components (Modern Approach)

With Angular 22+, you can import the directives or the module directly into your Standalone Components without needing an NgModule:

import { Component } from '@angular/core';
import { FlexLayoutModule } from 'ng-flex-layout';
// Or import individually: import { DefaultLayoutDirective, DefaultFlexDirective } from 'ng-flex-layout/flex';

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [FlexLayoutModule],
  template: `
    <div fxLayout="row" fxLayoutAlign="center center">
      <div fxFlex="50%">I am centered!</div>
    </div>
  `
})
export class AppComponent {}

Local Builds

Developers can, however, easily install this ng-flex-layout library using a local repository build and a directory copy:

pnpm run build
cd dist/releases/flex-layout
npm pack

                   -   API Documentation   -   StackBlitz Template   -   Live Demos

Clone this wiki locally