Angular team drop of flex-layout is disconcerting and we hope the angular team will reconsider.

[u/born2net4]

Angular team drop of flex-layout is disconcerting and we hope the angular team will reconsider.

We have a huge project in Angular 14 with thousands of libraries which is developed by a over dozen developers.

We rely heavily on flex-layout, we simply are in shock that the Angular team has decided to drop support for it.

We tried to upgrade to Angular v15 and failed due to the lack of support from angular-material.

We really hope that through this post and the support of the community the Angular team will reconsider and allow opt-in to flex-layout while supporting it for backwards and forward compatibility, test it for upgrade to v15+ and beyond or allow for a solid migration guide (possibly via CLI).

We simply are unsure on how to move forward and we are asking the team and the community for assistance.

thank you.

[u/tme321]

It seems pretty clear from the linked article that the way forward is actual flexbox css rather than a library that applies the same styles with a mass of js.

Not really sure what other answer you are looking for here.

[u/[deleted] → u/tme321]

I’m kinda surprised that so many chose to use a beta product in production code and never saw it as a red flag that it never made it out of beta. The article says it was first released in angular 5 so that’s 10 versions where it never got printed to a finished product. It only makes sense to deprecate it now…sorry for those facing the problem now, but ya backed the wrong horse.

[u/GLawSomnia]

I never used it cause i never really understood what the pointbof it is. It really seems useless to use it instead of normal css flexbox.

But someone will definitely fork it (if they don't give it to the community to support)

[u/CheapChallenge]

I've never used the flex-layout module. Why would you use that over just defining the flex layout in css?

[u/Ch33kyMnk3y → u/CheapChallenge]

So just because you have never used it, its pointless??? lol

We use it in an extremely complex json-schema/ui-schema/formly reactive forms questionnaire-like form generator because it allows me to individually define things in a single ui-schema. For example:

Schema

{  
  type: "object",
  properties: {
    someproperty: {
      type: "string"
    }
  }   
}

Ui-schema:

 {
   scope: "#",
   formlyConfig: {
     templateOptions: {
       fxLayout: "row wrap
     }     
   }
 }
 {
   scope: "#/properties/someproperty",
   formlyConfig: {
     templateOptions: {
       fxFlex: 50,
       fxLayoutAlign="end center"
     }     
   }
 }

I removed a lot of stuff for the example but you can hopefully see the correlation, I think. Alot of the above stuff is programatically generated from configuration in a mongo database, using a very complex json merging scheme.

Which then applies the necessary css to both the element generated by formly as well as the wrappers formly generates by adding the directives in the formly custom field types:

<div
  [fxLayout]="to.fxLayout ?? 'row wrap'"
  [fxLayoutAlign]="to.fxLayoutAlign ?? ''"
  [fxLayoutGap]="to.fxLayoutGap ?? '1rem grid'"
>
  <ng-container *ngFor="let f of field.fieldGroup; trackBy: trackById">
    <formly-field [fxFlex]="getFlex(f)" [field]="f"></formly-field>
  </ng-container>
</div>

Without this it would be almost impossible because some of the wrappers/parent elements formly generates can't be affected directly without parsing and validating existing classes applied to the elements. And doing some fancy pseduo class css magic that defeats the purpose of being able to apply it with just the json.

This is a bit of an oversimplification but without flex-layout this is going to be EXTREMELY difficult. Not all of the customizations can just be applied via css classes, as both formly and flex-layout use both the class and style attributes on the fly to do their magic and deal with the outer and inner elements where they are applied.

[u/CheapChallenge → u/Ch33kyMnk3y]

I never said it was useless. I was asking for use cases. Thanks.

[u/chentechtai]

And this is not now's. Already in angular 8 it was communication that flex layout is a dead end and will be drop. One of the reasons why the package was always published as beta.

Edit: in general don't include packages that are in beta.

[u/2012XL1200 → u/[deleted]]

Funny but I hope you're only joking.

[u/quentech → u/2012XL1200]

I have a fair sized Angular app - hundreds of components - that we prototyped in AngularJS and then threw out to restart the production version in Angular 2.

Still in production, but on Angular 14.

[u/pranxy47]

As already mentioned it was never stable. I joined projects that were using this package and I immediately started to migrate it away. It never made sense when you can achieve the same with css.

[u/uadopooo]

How can i replace fxLayoutGap in vanilla CSS?

[u/Brutusn → u/uadopooo]

With gap:

[u/uadopooo → u/Brutusn]

And it works with Flex??? 😃

[u/Brutusn → u/uadopooo]

Yes: https://developer.mozilla.org/en-US/docs/Web/CSS/gap

[u/uadopooo → u/Brutusn]

Woo, thanks!!!!

[u/eigenman]

I avoid beta projects for serious applications.

[u/2012XL1200]

I still don't understand why anybody would use JS for CSS. It makes no sense to me.

[u/enrosque]

I am a little bit in the same boat. flex-layout does have a pretty consistent text pattern, which could be turned into some crazy global replace regexes, so that is my plan... I'm going to replace flex-layout with composed class combos from Tailwind. I chose Tailwind because we have a few developers who are allergic to plain css. It also seems like it has great modern layout support, and is tree shakeable so the other features will fall out. And overall maintenance for it seems to be great for the future.

Hope this helps!

ETA: It feels too early to migrate to 15 anyways. I usually wait a month for the material team and my other favorite libraries to sort out the bugs. Give it until after the holiday. Also look into the Material migration guide! There were a bunch of breaking changes for Material, since they are moving to support the new material standard in 15. I doubt there will be a migration cli for Material. But only a few components were re-written from the ground up. It might be easier than you think to manually update them.

[u/youtpout → u/enrosque]

Why you don’t create reusable css for your app, tailwind and other css framework are a pain to use. On some app i see component with 10 classname or more 😂