Hybrid App Angular + Flex layout

Angular Flex layout is the modern framework. This layout API using FlexBox CSS + media Query. It allows the combination of responsive layout where components and elements of a web page change size and position based on different breaking points – Web apps that adapt to any screen size.

Advantages of Angular Flex Layout

  • Independent of Angular Material.
  • No external CSS requirements.
  • Support (future) for Handset/Tablet and Orientation breakpoints.
  • Support for ANY Layout injector value (instead of increments for 5).
  • Support for raw values or interpolated values.
  • Support for raw, percentage or px-suffix values* Change detection for Layout injector values.
  • Use provider to supply custom breakpoints.
  • Notifications for breakpoints changes.
  • Includes workaround for Media Query issues with overlapping breakpoints.
  • Media Query Activation detection.

Responsive Layout with Angular Flex

 

 

 

How to get started

To install it run:

To install Angular flex, you can use either Yarn or NPM with the following commands.

Install flex layout from NPM

Install Angular flex layout from NPM

Or Install flex layout with Yarn

Install Angular flex layout from YARN

Now import Flex layout module in your app module.

How It Implement Angular Flex Layout?

The Flex Layout engine intelligently automates the process of applying appropriate Flexbox CSS to browser view hierarchies. This automation also addresses many of the complexities and workarounds encountered with the traditional, manual, CSS-only application of box CSS.

Angular Flex Layout provides you with the tools for Adaptive Layout design – fxHide, fxShow, and ngIf.

 

Below component shows all the screen size starting Md and above.list of all breakpoints below:

 

Component or media query

Learn about Angular Flex-Layout with Angular Material Lead Thomas Burleson

 

Conclusion

Angular 5 with flex layout is better than Bootstrap because it provides a more robust grid system which relies on CSS flex. In Angular with flex layout We can use percentage points, pixels, inches to define width, height, margin and it is extremely easy to do so and in bootstrap limited to grid system divided into 12 sections. It makes using CSS flex very easy, although coming from bootstrap it took time getting used to it.

Angular Flex is the powerful layout tool for angular. It Provides an API that can be used in both component template and class allowing helps to manipulate different screen sizes like, arranging them vertically for small devices to create the responsive layout.