You might not need Angular Flex-Layout


Reader, I’m extremely sorry for using the clickbait-y headline for this post. I did not mean to talk ill about anything since this is not a rant 😷

Angular Flex-Layout library is really useful even today to quickly sprinkle CSS Flexbox or Grid layout declaratively in Angular applications. And it does save time in comparison with writing layout CSS by hand in various Angular components repetitively. So not using it in Angular applications is not an option unless a far better alternative with the same declarative ability is available. So I’m looking for,

  1. Declarative without steep learning curve.
  2. Cost effective over Network.
  3. Customisable enough to be an alter ego of Angular Flex-Layout

Turns out TailwindCSS hits a home run on these front. It is equally declarative for being a utility-first CSS framework packed with all kinds of CSS classes baked in. It reduces the main bundle size in Angular applications by a huge margin – the larger the applications, the better the gain (a sample application I built has seen ~40% dip in main bundle size without gzip). Watch the video for the proof 👇

Demonstration of advantages of TailwindCSS over Angular Flex Layout

If you are convinced by the demo above then you may find this comparison handy while moving away from Angular Flex-Layout in your application too.

Angular Flex-Layout directivesTailwind Equivalent CSS classes
fxLayout=”<direction> <wrap>”Use flex 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 margin-right=”% | px | vw | vh” on flex items
fxFlex=”” | px | % | vw | vh | <grow> | <shrink> <basis>Use flex, grow, and shrink classes along with custom
flex-basis classes overriding *tailwind config*
fxFlexOrder=”int”Use Order classes along with custom classes
overriding *tailwind config*
fxFlexOffset=”% | px | vw | vh”Use Margin classes
fxFlexAlign=”start | baseline | center | end”Use Align Self classes
fxFlexFill and fxFillUse w-full and h-full classes
fxShow and fxHideUse block and hidden classes
Responsive APIOverride Tailwind’s default breakpoints to match
with Angular Flex-Layout. For example,

theme: {
extend: {
screens: {
‘sm’: { ‘min’: ‘600px’, ‘max’: ‘959px’ },
‘lt-sm’: { ‘max’: ‘599px’ }
….
},
}
}
[ngClass.xs]=”{‘first’:false, ‘third’:true}”Use aforementioned responsive API
class=”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 for
grid-template-areas so we have to use grid columns
and 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 classes
gdAutoUse Grid Auto Flow classes
gdColumnsUse Grid Template Columns classes along with custom
classes overriding *tailwind config*
gdRowsUse Grid Template Rows classes along with custom
classes overriding *tailwind config*
gdGapUse Gap classes along with custom classes
overriding *tailwind config*
Angular Flex Layout vs Tailwind comparison

Unlike TailwindCSS, Angular Flex-Layout also has Media Observer which enables applications to listen for media query activations. I think, Breakpoint Observer from Angular CDK can compensate for it.

Wrap-up

Alright, that’s me. You can find the source code of the aforementioned sample application on https://github.com/codef0rmer/you-might-not-need-angular-flex-layout

Do let me know in the comment if you agree with the proposed solution or If I miss anything to cover?

🎅 Happy Xmas and Happy New Year 2021 🎅

Update 1

I have tried to integrate tailwind in Angular application using Angular Material and found a few issues with CSS specificity. Meaning in certain cases, the tailwind CSS classes do not get applied as expected and to obviate the issue, I had to apply !important on handful of tailwind CSS classes. The approach was tweeted last time:

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

This site uses Akismet to reduce spam. Learn how your comment data is processed.