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 👍

[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!