Angular Layout Migration Guides

[CaerusKaru]

In accordance with the announcement in the Medium post about this library's future, this is a tracking issue for requesting assistance in migrating complex usages of Angular Layout.

If you believe that your library falls under this case, you can request (or vote on existing) migration guides to other, supported solutions like Tailwind or Angular CDK.

Please use the +1 reaction wherever applicable, and do not comment +1. Those comments will be ignored/deleted.

I appreciate your patience as we go through this process. Until the campaign is complete, the library will still be actively maintained.

In your request, please include the following details:

• How many usages you have in your application/library
• Which directives/services from this library you are using
• Why it is non-trivial to migrate

This will help us prioritize the guides as they are submitted.

[michaelfaith]

Our layout needs, I feel, are pretty straightforward. We're almost exclusively using the fx directives (e.g. fxLayout, fxFlex, fxLayoutGap, fxLayoutAlign) in our components, along with the breakpoint aliases (e.g. fxFlex.md), and it seems like Tailwind might be a good alternative to migrate to for that. The main issue is that tailwind isn't currently supported for Angular libraries (via ng-packagr). Any advice on how to achieve that in a re-usable way (since it'll be used across our component library) without tailwind?

Also, really sorry to see this close down. Appreciate all your hard work over the years keeping it alive.

[blogcraft]

It's sad to see this library go away when it was clearly very good! 😕

For me I have no idea where to migrate and what would be even the benefits, but I foresee it to be a very big pain. Our app has ~370 Components and counting and ~4700 attributes in the templates (and we have 3 of those apps). We heavily use fxLayout (cloumn, rows and wraps), fxLayoutGap, fxFlex (with breakpoints and calc), fxFlexFill, fxLayoutAlign, ngClass.*, fxHide and show mostly...

But Thanks a lot @CaerusKaru for all your time and dedication maintaining this library. It has been extremely helpful!

[jnfaerch]

Sad to see this project close own :(

We are using flex-layout heavily in one big and several smaller apps. I hope Tailwind can be a replacement but right now I have no overview of this.

We use this library in our large app ~1.200 times Breakpoints heavily used all through the app These are the main directives we use fxLayout fxLayoutGap fxLayoutAlign fxFlex fxFlexFill fxHide fxShow

Thank you for your work on this library and thank you for the planned transition/shut-down period :+1:

[Mikastark]

So so so so so sad. This project is fantastic, I can't believe it comes to an end... I use this library massively and It will be very hard to something else. I almost use all fxFlex* and fxLayout* features.

I'm not very okay with using tailwind, I hope someone would like to continue to maintain flex layout.

Anyway thanks for everything @CaerusKaru, the job you have done so far is great :)

[ianvink]

We have a huge app with about 900 directives from this project. Mostly these directives:

• fxLayout
• fxLayoutGap
• fxLayoutAlign
• fxFlex
• fxFlexFill
• fxHide
• fxShow We also have use of many break points like fxFlex.md etc

[Interscope19]

I know that the angular team have their thoughts about the web standar but this library offers more than just alternative for css , it makes the flex and grid hell( joke) more easy to implement and it provides some directives for breakpoints i mean, its a bit agressive to declare a library -that is commonly used for a bunch of teams in their productions projects- as deprecated, i think that we can keep those directives and other stuff that the library offers ( breakpoints and declarative simplicity on flex grid) and incorporate as default in the framework, that can give angular more unique identity instead to make it more like react.

[blogcraft]

I started giving (unwillingly) a try to Tailwind CSS. And I was quite surprised as it is not a bad experience at all.

I found a guide here to help migrate from Flex Layout to Tailwind and it's pretty straight forward.

Also, for people using VS Code I recommend getting the Tailwind CSS IntelliSense extension. It is quite useful.

---

In a nutshell it is this:

Angular Flex-Layout directives	Tailwind Equivalent CSS classes
fxLayout=”<direction> <wrap>”	Use flex-<direction> flex-<wrap> classes
fxLayoutAlign=”<main-axis> <cross-axis>”	Use justify-<main-axis> items-<cross-axis> content-<cross-axis> classes
fxLayoutGap=”% | px | vw | vh”	Use gap on flex items
fxFlex=”” | px | % | vw | vh | <grow> | <shrink> <basis>	Use flex, grow, and shrink classes along with customflex-basis classes overriding tailwind config
fxFlexOrder=”int”	Use Order classes along with custom classesoverriding tailwind config
fxFlexOffset=”% | px | vw | vh”	Use Margin classes
fxFlexAlign=”start | baseline | center | end”	Use Align Self classes
fxFlexFill and fxFill	Use w-full and h-full classes
fxShow and fxHide	Use block and hidden classes
Responsive API	Override Tailwind’s default breakpoints to matchwith Angular Flex-Layout. For example,theme: {extend: {screens: {‘sm’: { ‘min’: ‘600px’, ‘max’: ‘959px’ },‘lt-sm’: { ‘max’: ‘599px’ }….},}} I personally I didn't need to do this.
[ngClass.xs]=”{‘first’:false, ‘third’:true}”	Use aforementioned responsive APIclass=”gt-xs:first xs:third”
[ngStyle.sm]=”{‘font-size’: ’16px’}”	Use custom CSS classes as mentioned above.
<img src=”a.ico” src.xs=”b.ico”/>	Use custom CSS classes as mentioned above.
gdAreas.xs=”header header | sidebar content”	Tailwind does not have a support forgrid-template-areas so we have to use grid columnsand then apply Grid Row Start/End or
Grid Column Start/End classes on grid items.For example, xs:grid-cols-2 xs:grid-rows-2
gdAlignColumns=”<main-axis> <cross-axis>”	Use Align Items and Align Content classes
gdAlignRows=”<main-axis> <cross-axis>”	Use Place Content and Place Items and Place Items classes
gdAuto	Use Grid Auto Flow classes
gdColumns	Use Grid Template Columns classes along with customclasses overriding tailwind config
gdRows	Use Grid Template Rows classes along with customclasses overriding tailwind config
gdGap	Use Gap classes along with custom classesoverriding tailwind config

[coreConvention]

Just now seeing this. This is upsetting news to say the least. I built an entire JsonSchema/ui-schema based platform around angular flex for one of the biggest hospital chains in the country, which only works because of the way angular flex works (using the directives). There really is no alternative that I am aware of.

Have you all considered handing the project off to the community to maintain? Or is the issue some necessary collaboration with the angular team?

[Mikastark]

Using tailwind is pointless to me. I personally prefer to write few css lines eventually coupled with CDK layout API than over weight my project with a css framework built for people unable to actually write CSS by themself.

I agree with the previous post, if this lib should be maintained by the community it would be fantastic

[anisabboud]

I've successfully migrated from flex-layout (~200 usages) to CSS Flexbox + CSS Grid + Angular CDK layout (without Tailwind).

Here are the replacements I made, in case they are helpful to others.

fxLayout="row", fxLayout="col"

<div fxLayout="row"> → <div class="flex-row">. Global CSS:

// Flex row/col + grid.
.flex-row { display: flex; flex-direction: row; }
.flex-col { display: flex; flex-direction: column; }
.grid { display: grid; }

// Flex-wrap utils.
.flex-wrap { flex-wrap: wrap; }  // Mostly used with flex-row, when wrapping is desired.
.flex-col-xs { @media screen and (max-width: 599px) { flex-direction: column; } }  // Switch from flex-row to flex-col on mobile.

fxLayoutGap

<div fxLayoutGap="8px"> → <div class="gap-8">. Global CSS for common gaps (& inline CSS for uncommon gaps):

// Gap.
.gap-4 { gap: 4px; }
.gap-8 { gap: 8px; }
.gap-10 { gap: 10px; }
.gap-12 { gap: 12px; }
.gap-16 { gap: 16px; }

fxLayoutAlign

<div fxLayoutAlign="justify-between center"> → <div class="space-between items-center">. Global CSS for common alignments (& inline CSS for uncommon ones):

// Justify content.
.space-between { justify-content: space-between; }  // Used very often with flex-row.
.justify-center { justify-content: center; }  // Used to center something via flexbox.

// Align items. (Naming inspiration: https://tailwindcss.com/docs/align-items.)
.items-center { align-items: center; }  // Used very often with flex-row.

fxFlex

<div fxFlex> → <div class="flex-1">. Global CSS for common flex values (& inline CSS for uncommon values like flex-basis):

// Flex/grow/shrink properties https://developer.mozilla.org/en-US/docs/Web/CSS/flex.
.flex-1 { flex: 1 }  // Same as flex: 1 1 0 (grow, shrink, basis 0). Has similar effect to width: 100%;
.flex-grow { flex-grow: 1; }  // Same as flex: 1 1 auto (grow, shrink, basis auto). For spacer, etc. 

fxHide, fxShow

<div fxHide.xs> → <div class="hide-xs">. Global CSS for common hide breakpoints (depending on your app):

// Hide & show for different breakpoints.
.hide-xs    { @media screen and (max-width: 599px) { display: none; } }  // Hide on mobile.
.hide-gt-xs { @media screen and (min-width: 600px) { display: none; } }  // Show only on mobile. Hide on desktop.
.hide-sm    { @media screen and (max-width: 959px) { display: none; } }  // Hide on mobile/tablet.
.hide-gt-sm { @media screen and (min-width: 960px) { display: none; } }  // Show only on mobile/tablet. Hide on desktop.

gdColumns

<div gdColumns="XYZ" gdGap="8px"> → <div class="grid gap-8" style="grid-template-columns: XYZ">. I.e., re-using grid & gap classes from above, and using inline style for grid-template-columns.

ngStyle.xs, ngClass.xs

These are the most challenging to replace - they're one of the nicest features of the flex-layout library. I didn't find a straight-forward replacement. I just replaced them with custom CSS classes & breakpoints in the CSS file. For example, <div style="width: 100px" ngStyle.xs="width: 50px"> → <div class="my-div"> + CSS below

.my-div {
  width: 100px;
  @media screen and (max-width: 599px) {
    width: 50px;  // Smaller on mobile.
  }
}

Note to avoid confusion: Angular's own ngStyle & ngClass are not deprecated. Only the flex-layout extension of these (ngStyle.breakpoint & ngClass.breakpoint) is deprecated.

MediaObserver

Replaced with Angular CDK Layout's BreakpointObserver (which felt faster to me in run-time). Before:

const isMobile: Observable<boolean> = this.mediaObserver.asObservable().pipe(
  map((changes: MediaChange[]) => changes.some(change => change.mqAlias === 'xs')));

After:

const isMobile: Observable<boolean> = this.breakpointObserver.observe(Breakpoints.XSmall).pipe(
  map(state => state.matches));

[michaelfaith]

@anisabboud this is great. Thanks. Just a note though, ngStyle and ngClass are not part of flex-layout, and won't be affected by its retirement. They're part of angular core.

[Interscope19]

@anisabboud this is great. Thanks. Just a note though, ngStyle and ngClass are not part of flex-layout, and won't be affected by its retirement. They're part of angular core.

i think that he talk about de .sm .xs after the ngStyle or ngClass

[michaelfaith]

Ah, gotcha. Fair enough

[anisabboud]

Indeed, I was referring to ngStyle.xs & ngClass.xs, etc. (with breakpoints). But it's an important clarification to make to avoid confusing others, so I updated my post, thanks @michaelfaith!

[sourav-bhar]

Really sad and disappointed to see this library be deprecated. Like many others here, we have used and depended on flex-layout heavily over the years and it's a core part of every component we have ever written.

I see migrating all of that to other alternatives like Tailwind to be a huge, non-trivial, undertaking.

This was a great library and we're truly grateful to all the maintainers who have done such a wonderful job over the years. Please consider handing it over to the community instead of a complete deprecation.

Here is our usage statistics:

We are using flex-layout heavily across 4 production apps. We mainly use the flex-layout directives with breakpoints in all the apps.

Total usage statistics: 7,309 times across 352 components

Here's the breakdown by directive: fxFlex – 3,625 times across 352 components fxLayout – 3,586 times across 351 components fxLayoutGap – 909 times across 283 components fxLayoutAlign – 1,346 times across 350 components fxFlexFill – 6 times in 5 components fxHide, fxShow – 57 times across 32 components

[BryanYin]

By reading Angular blog, I found this issue. We have been using this lib for years and it works really good, thank you for your efforts to support it for such a long time! But it's really sad this lib is going to the end of its lifecycle. We are heavily using below directives with different breakpoints: fxFlex fxLayout fxLayoutAlign fxLayoutGap

I agree with @coreConvention's comments above, please consider hand over this project to the community.

[aceArt-GmbH]

<div fxFlex> → <div class="flex-1">.

@anisabboud I had a similar idea. But adding fxFlex does add style properties to the parent element as well and not just the elment itself.

<div>
    <div>
        test 1
        <div fxFlex>test 2</div>
    </div>
</div>
<div>
    <div>
        test 1
        <div class="flex-1">test 2</div>
    </div>
</div>

is not the same thing. Using the new :has() selector should work however

[ginxdroid]

What about using Bootstrap's grid system + angular material components? (Only bootstrap grid and not other ones like ui components of bootstrap)

[ginxdroid]

Please consider handing over this project to the community. This project is so good. What I liked about using this:

We can use directives instead of classes. That is in other libraries we have to use multiple classes altogether but if we use this one then there is no need to use multiple classes in single class attribute.

Directives makes code easy to maintain and understand since different directives handle different things. e.g if we use bootstrap grid system then code will look like: class="col-12 col-md-6 <our other classes>" but if we use this library then: fxFlex="100%" fxFlex.gt-sm="50%"

(It is not full code ofcourse it is just an example.)

which makes code easy to understand since class attribute is less bloated.

[ginxdroid]

Maybe consider taking votes from community before halting this project. There are many production applications which are using this great library in their templates for building layouts.

[CaerusKaru]

First and foremost, thank you to everyone who has so far shared a solution that has worked for them. This kind of upstreaming and knowledge sharing is crucial to a smooth transition, and is a benefit to all. Sincerely, thank you.

Second, in response to a few comments about "handing off to the community": I am totally ok with anyone forking this package under a new namespace and maintaining something supported the community can move to. If the support story is truly solid, I'm also more than happy to endorse the "official" successor. I do want to make clear, though, that we did search for an appropriate community sponsor of the project prior to the sunsetting of this repo. Unfortunately, no one we talked to really felt it was in their primary domain/expertise to maintain, and so here we are. The project cannot continue under the Angular namespace, and therefore its current NPM package name, because the credentials for publishing must remain tightly controlled by the Angular team. This, along with the unofficial "supported by Angular" moniker the namespace gives the library. But if someone wants to setup, for instance ngx-layout or the like, you are more than welcome.

In the meantime, please keep adding migration stories here. When we get closer to the beginning/middle of LTS, I will start publishing guides/blogs, collated from the cases here (along with some harder cases without easy solutions).

[ginxdroid]

I experienced follwing problems while migrating to other libraries:

1. Migrating to Bootstrap grid = bloated class attribute
2. Migrating to Tailwind css = same, bloated class attribute
3. Writing your own classes = difficult to maintain when application grows larger and difficult to understand 'quickly' for other devs who are working on the same project.

Main speciality of this library: We can use directives instead of classes which will make class attribute less bloated.

I will not prefer writing different attribute values in the same attribute in template because it is not an easy thing to understand especially when building responsive user interface as class attribute grows larger and larger........ e.g. class="col-xs-12 col-sm-8 col-md-6 col-lg-4 <other -class-1> <other -class-2> <other -class-3>"

Bloating bloating and bloating.....

Now consider this: class="<other -class-1> <other -class-2> <other -class-3>" fxFlex.xs="100%" fxFlex.sm="80%" fxFlex.md="50%" fxFlex="33%

which bloats class attribute less than the above example.

This is what I liked about this library. When there is complex layout ui then those separate directives makes code easy to understand and fix.

That is if there is something wrong in mobile device layout then we only need to focus and fix fxFlex.xs directive and not others.

[jpike88]

All I can say is wow.

The entire purpose of this library was to prevent the need to pollute elements with css classes. It serves that purpose extremely well, increasing readability and preventing the code from descending into css hell, falling back to CSS when absolutely necessary.

If the Angular team knew what was good they'd put in the small amount effort to keep it as a part of their toolkit, or even integrate it into the CDK itself. It's like second nature to use in an Angular project, very disappointing news really.

There is no other library I know of that works in this way using directives, and the utility is too good to lose. I'll happily join an unofficial fork to keep it up to speed, and probably like many others, have no intention of dropping it for my various projects.

[ginxdroid]

I am totally agree with you @jpike88 .

[ginxdroid]

A library which has 300k downloads per week is going to halt with just a single Medium post!!!! What the hell........ I am pretty frustrated and sad.

[alexander-kastil]

I've successfully migrated from flex-layout (~200 usages) to CSS Flexbox + CSS Grid + Angular CDK layout (without Tailwind).

Here are the replacements I made, in case they are helpful to others.

fxLayout="row", fxLayout="col"

<div fxLayout="row"> → <div class="flex-row">. Global CSS:

// Flex row/col + grid.
.flex-row { display: flex; flex-direction: row; }
.flex-col { display: flex; flex-direction: column; }
.grid { display: grid; }

// Flex-wrap utils.
.flex-wrap { flex-wrap: wrap; }  // Mostly used with flex-row, when wrapping is desired.
.flex-col-xs { @media screen and (max-width: 599px) { flex-direction: column; } }  // Switch from flex-row to flex-col on mobile.

fxLayoutGap

<div fxLayoutGap="8px"> → <div class="gap-8">. Global CSS for common gaps (& inline CSS for uncommon gaps):

// Gap.
.gap-4 { gap: 4px; }
.gap-8 { gap: 8px; }
.gap-10 { gap: 10px; }
.gap-12 { gap: 12px; }
.gap-16 { gap: 16px; }

fxLayoutAlign

<div fxLayoutAlign="justify-between center"> → <div class="space-between items-center">. Global CSS for common alignments (& inline CSS for uncommon ones):

// Justify content.
.space-between { justify-content: space-between; }  // Used very often with flex-row.
.justify-center { justify-content: center; }  // Used to center something via flexbox.

// Align items. (Naming inspiration: https://tailwindcss.com/docs/align-items.)
.items-center { align-items: center; }  // Used very often with flex-row.

fxFlex

<div fxFlex> → <div class="flex-1">. Global CSS for common flex values (& inline CSS for uncommon values like flex-basis):

// Flex/grow/shrink properties https://developer.mozilla.org/en-US/docs/Web/CSS/flex.
.flex-1 { flex: 1 }  // Same as flex: 1 1 0 (grow, shrink, basis 0). Has similar effect to width: 100%;
.flex-grow { flex-grow: 1; }  // Same as flex: 1 1 auto (grow, shrink, basis auto). For spacer, etc. 

fxHide, fxShow

<div fxHide.xs> → <div class="hide-xs">. Global CSS for common hide breakpoints (depending on your app):

// Hide & show for different breakpoints.
.hide-xs    { @media screen and (max-width: 599px) { display: none; } }  // Hide on mobile.
.hide-gt-xs { @media screen and (min-width: 600px) { display: none; } }  // Show only on mobile. Hide on desktop.
.hide-sm    { @media screen and (max-width: 959px) { display: none; } }  // Hide on mobile/tablet.
.hide-gt-sm { @media screen and (min-width: 960px) { display: none; } }  // Show only on mobile/tablet. Hide on desktop.

gdColumns

<div gdColumns="XYZ" gdGap="8px"> → <div class="grid gap-8" style="grid-template-columns: XYZ">. I.e., re-using grid & gap classes from above, and using inline style for grid-template-columns.

ngStyle.xs, ngClass.xs

These are the most challenging to replace - they're one of the nicest features of the flex-layout library. I didn't find a straight-forward replacement. I just replaced them with custom CSS classes & breakpoints in the CSS file. For example, <div style="width: 100px" ngStyle.xs="width: 50px"> → <div class="my-div"> + CSS below

.my-div {
  width: 100px;
  @media screen and (max-width: 599px) {
    width: 50px;  // Smaller on mobile.
  }
}

Note to avoid confusion: Angular's own ngStyle & ngClass are not deprecated. Only the flex-layout extension of these (ngStyle.breakpoint & ngClass.breakpoint) is deprecated.

MediaObserver

Replaced with Angular CDK Layout's BreakpointObserver (which felt faster to me in run-time). Before:

const isMobile: Observable<boolean> = this.mediaObserver.asObservable().pipe(
  map((changes: MediaChange[]) => changes.some(change => change.mqAlias === 'xs')));

After:

const isMobile: Observable<boolean> = this.breakpointObserver.observe(Breakpoints.XSmall).pipe(
  map(state => state.matches));

👍 Actually one could go one step further and create directives out of this … most samples for the new directives composition api just combine styles 😜

[michaelfaith]

@CaerusKaru just to clarify, v15 will be the final version of flex-layout right? That was my read of the medium article, and it seems like a lot of folks'.

[ianvink]

Does anyone have a small set of Directives which will do the very basics, like the ones below. I feel that if there was it would solve the majority of uses and provide tremendous value to the community.

fxLayout fxLayoutGap fxLayoutAlign fxFlex fxFlexFill fxHide fxShow

[stevebor1]

I recently converted our large government focused app from angular/bootstrap to angular/material/flex-layout, as we made the decision to stick with core technologies and offerings as they would be more stable. 😔......

We heavily use the standard fxLayout/fxFlex as well as all breakpoints to simplify and standardize development across a responsive application. We've been waiting on 'density' to be finally supported in components, and now that it is in 15, we were ready to upgrade. Now this.

[EduardoMiguel2109]

why not create a simple library that maps the directives to the css in the element? I was thinking of doing it this way to avoid changes to existing code. Before the project dies, you could do one last release with this css mapping