ngx-layout v22: Angular’s Flex-Layout, Brought Forward

The community successor to @angular/flex-layout is now current with Angular 22 — and a few long-standing rough edges are finally gone.

When Angular retired @angular/flex-layout, a lot of production apps were left holding a directive API they relied on with no upgrade path. @ngbracket/ngx-layout exists to be that path. The latest release, v22, brings the library current with Angular 22 and modernizes the engine underneath the familiar fxLayout / fxFlex directives you already know.

What changed

The headline is fxLayoutGap. It now emits a real CSS gap on the container instead of injecting margins onto child elements. Cleaner output, fewer specificity surprises, and it plays nicely with flex and grid. The gap properties are also direction-independent (logical) now, so RTL layouts no longer break. One thing to note: because the gap lives on the container, the element needs to be a flex container (fxLayout applied) for it to take effect.

Standalone apps get a proper provider function, so you can wire ngx-layout into bootstrap config without a module import. There’s also an opt-in MATERIAL_BREAKPOINTS preset for teams that want Material's breakpoint set, improved SSR / Universal support, and internal performance work across the directives.

Breaking changes

Two to plan for:

• The deprecated Default* directives are removed. Swap DefaultFlexDirective → FlexDirective, and so on. Same selectors, same behavior — only the symbol name changes.
• fxLayoutGap margins → gap. The legacy " grid" suffix still parses, but is now equivalent to a plain gap.

For most apps the migration is a package swap plus a find-and-replace.

New docs and demo

Documentation has been rewritten from scratch, and there’s a fresh interactive demo covering layout, grid, and responsive patterns so you can see the engine react to breakpoints live.

• 📖 Docs: https://docs.ngx-layout.ngbracket.com
• 🧪 Demo: https://ngx-layout.ngbracket.com
• 📦 npm i @ngbracket/ngx-layout

MIT licensed, open source, actively maintained. Issues and PRs welcome at github.com/ngbracket/ngx-layout.

---

Originally published on Medium.