Angular Flex Layouts
On today’s episode, Charles Max Wood, Alyssa Nicoll, Joe Eames, John Papa, Lukas Reubbelke, and Ward Bell discuss Angular Flex Layouts with Thomas Burleson. Thomas has been a part of the Angular community since dot 9 and is currently taking the lead on flex layout. Tune in to learn more what this new library from Angular is all about and discover what it has in store for you.
What is a Flex Layout?
Angular has evolved throughout the years from Angular 1 to Angular 2 along with its features. You think of applications that can possibly be created and encounter two roadblocks more often than not. These concern either animations or laying out reviews.
Flex layout is basically part of the Angular set of libraries that you can install. It's a whole lot better than bootstrapping. Its repository is @angular/flex-layout. Once you discover its features and begin using it, you probably won't go back to using bootstrap again.
Background on Flex Box
Flex Box, or fully called as Flex Box CSS is a set of features that is supported by most browsers. This can be used to organize the layout of your DOM elements, whether done horizontally or vertically.
Its function also covers resizing and building connections between a parent container and the children, particularly on the laying out of children. Moreover, it saves you from using CSS floats without having to think of grid layout anymore.
There are two versions of an Angular material and they are as follows: Angular JS and Angular material. The former is essentially material 1 for Angular 1 dot x, and the latter is material 2, on which Flex Box CSS is used on its certain components.
The usage of Flex Box CSS is done for two reasons. First, it is not desirable to tightly pair material 2 with the new library that is considered to be still in the maturity process. Second, it is sometimes difficult to depend on an external library to layout internals of a specific component when it comes to writing components.
If you’re short on time, here are the highlights of Angular Flex Layouts:
What is a flex layout? (1:34)
Overview on the flex box? (4:18)
Browser adoption on flex box? (10:10)
Compatibility of Angular material? (23:44)
Dealing with Github issue? (39:05)
Getting started with flex layout? (40:09)
Lukas: Angular Test Bed and Thomas as his first Angular friend
Charles: Google Hangouts and Google Screenflow