Photo by Krzysztof Hepner on Unsplash
Back in October 2022, The Angular team decided to deprecate the Angular Flex-Layout library and put the library into LTS support (due to finish somewhere around late 2023).
You can read the full farewell post here: https://medium.com/@caerus.karu/farewell-flex-layout-aaa567023769
First some background to the library.
What is Angular Flex-Layout?
When developing applications we usually add classes to our elements, these [classes] provide a way to apply layout and styling usually in the form of Cascade Style Sheets (CSS, SCSS, Sass or Less). For layout, we could also use the aforementioned CSS, but for greater control, we have Flexbox and CSS Grid.
These are similar, in the sense that they both control the layout of a page, they just approach it differently. For example, Flexbox is a one-dimensional layout of either row or column, whereas CSS Grid is a two-dimensional layout of row and column together. We add our layout code to our Cascading Style Sheets, for example:
.container {
// flexbox layout
display: flex;
flex-direction: row;
align-items: flex-start;
justify-content: center;
// styling css
font-family: ‘Lato’;
font-size: 14px;
border-radius: 8px;
}
But what if could apply our Flexbox or CSS Grid code directly to our HTML pages? Well… that’s where the Angular Flex-Layout library shines because that’s exactly what it allows us to do. After adding the library to our project through npm install, we can import either the Flexbox module or the CssGrid module (or both with the combined FlexLayoutModule). We can then add directives to our HTML, for example:
import {FlexLayoutModule} from ‘@angular/flex-layout’;
@NgModule({
…
imports:[FlexLayoutModule],
…
});
<div fxLayout=”row” fxLayoutAlign=”space-between”>
</div>
What is this post about?
I started this post by saying that the Angular team have now deprecated this library and that the long-term support will come to an end later this year, so why am I writing a post about a deprecated library?
I started using Angular Flex-Layout not long after starting working with Angular and Angular Material, for the team I was working in, it was a natural choice for the product we were working on, both libraries and the framework all played really well together, and they all shared a similar release cadence, which helped when it came to updating.
I was saddened by the news that this library was to be archived at the end of 2023 and was in two minds about whether I should volunteer to take on such a well-known library. But during December/January, I monitored the Angular/Flex-Layout GitHub repo and there was a growing concern by developers that they were faced with having to rewrite large parts of their projects and migrate to something else, the Angular team had put together a migration guide, but there is no migration tool and developers will have to manually change their projects.
I get why the Angular team are dropping it, advancements in modern CSS have come a long way since this library was first written, but the library is still very popular and still getting over 300,000 weekly downloads and just shy of 6000 stars on GitHub. There are many ways to apply a layout to an application and this may not be a perfect solution for everyone, but it does a job and I think it does it very well.
So with all that said, I have some good news, I’m taking over the maintenance of this library, I thought about this for quite a while and I just had to continue. I have used this library myself for several years and I’ve thoroughly enjoyed using it.
Initially, I’m not looking to make any changes to the library, my main focus is just to release a stable version of the library and to get a handle on how the code works, GitHub tasks and looking at the documentation.
This is my first real adventure into maintaining a complete OSS project, in the past, I’ve submitted PRs to OSS projects, but this is a whole different kettle of fish, so please bear with me while I get up to speed, and please feel free to reach out to me with suggestions, sponsoring, offers of help and support or just words of encouragement.
I’ve had to change the name of the project as it was not possible to take ownership of the original project. So the new name for @angular/flex-layout is now <insert drum roll here> @ngbracket/ngx-layout.
You need to change where the imports come from, using the example from above, it now looks like. You will need to uninstall @angular/flex-layout first.
import {FlexLayoutModule} from ‘@ngbracket/ngx-layout’;
@NgModule({
…
imports:[FlexLayoutModule],
…
});
The library is now on GitHub at https://github.com/ngbracket/ngx-layout and on NPM at https://www.npmjs.com/package/@ngbracket/ngx-layout.
I would like to take this opportunity to thank Caerus and Thomas for all their hard work and all the contributors that made this project the success it is.
I look forward to working with the community on this project and seeing where it takes us.
Please contact me if you want to help with contributing, sponsorship, promoting or anything else.
Join us at ng-conf 2023!
ng-conf | June 14–15, 2023
Workshops | June 12–13, 2023
Location | Salt Lake City, UT
ng-conf 2023 is a two-day single-track conference focused on building the Angular community. Be a part of this amazing event, and meet the Angular Team and the biggest names in the community. Learn the latest in Angular, build your network, and grow your skills.
A new layout ahead was originally published in ngconf on Medium, where people are continuing the conversation by highlighting and responding to this story.