Adventures in Angular

Adventures in Angular is a weekly podcast dedicated to the Angular JavaScript framework and related technologies, tools, languages, and practices.

Subscribe

Get episodes automatically

135

AiA 135 Angular Flex Layouts with Thomas Burleson


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.

Angular Material

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.

To hear more about Angular Flex Layouts, download and listen to the entire episode Angular Flex Layouts with Thomas Burleson. Connect with Thomas too on Twitter and Github

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)

Picks:

Alyssa: NG Air Episode 103, Feisty Pets

Joe: John Wick 2 and PrimeFaces

Lukas: Angular Test Bed and Thomas as his first Angular friend

John: AmpliFi RouterLeadership Lesson, Microsoft Developer Advocates Hiring

Charles: Google Hangouts and Google Screenflow

Thomas: The Accountant, Controlling Time with Zone.js and FakeAsync by Victor Savkin

Episode Links:

Layout Demos, Angular v2 samples, Using CSS Flexible Boxes

This episode is sponsored by

comments powered by Disqus
x