Angular Flex Kick Off
Angular-cli
This project was generated with angular-cli version 1.0.0-beta.24.
Development server
Run ng serve for a dev server. Navigate to http://localhost:4200/. The app will automatically reload if you change any of the source files.
Code scaffolding
Run ng generate component component-name to generate a new component. You can also use ng generate directive/pipe/service/class/module.
Build
Run ng build to build the project. The build artifacts will be stored in the dist/ directory. Use the -prod flag for a production build.
Running unit tests
Run ng test to execute the unit tests via Karma.
Running end-to-end tests
Run ng e2e to execute the end-to-end tests via Protractor.
Before running the tests make sure you are serving the app via ng serve.
Deploying to Github Pages
Run ng github-pages:deploy to deploy to Github Pages.
Further help
To get more help on the angular-cli use ng help or go check out the Angular-CLI README.
Flex Layout
Angular Flex Layout provides a sophisticated layout API using FlexBox CSS + mediaQuery. This module provides Angular (v2.x and higher) developers with component layout features using a custom Layout API, mediaQuery observables,and injected DOM flexbox-2016 css stylings.
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.
The real power of Flex Layout, however, is its responsive engine. The Responsive API enables developers to easily specify different layouts, sizing, visibilities for different viewport sizes and display devices.
The sources for this package are in the Flex Layout repository.
Please file issues and pull requests against that repo.
License: MIT
Quick Links
Developers
Demos
Templates
Why choose Angular Flex Layout
While other Flexbox CSS libraries are implementations of:
- pure CSS-only implementations, or
- the JS+CSS Stylesheets implementation of Angular Material v1.x Layouts.
Angular Flex Layout - in contrast - is a pure-Typescript UI Layout engine with an implementation that:
- uses HTML attributes (aka Layout API) to specify the layout configurations
- is currently only available for Angular (v2.x or higher) Applications.
- is independent of Angular Material (v1 or v2).
- requires no external stylesheets.
- requires Angular v2.x or higher.
Browser Support
How it works!
The Angular Flex Layout features enable developers to organize UI page elements in row and column structures with alignments, resizing, and padding. These layouts can be nested and easily used within hierarchical DOM structures.
The Flex Layout API is used simply as attributes on your HTML elements. That is it!
Technically the API is a set of Angular directives with intuitively-named selectors...
🤓
All the magic of applying the Flexbox CSS is handled under-the-hood. The Layout applies (injects) Flexbox CSS styles to each DOM element... and your layout and elements will fluidly update their positioning and sizes as the viewport size changes.
<div class="flex-container" fxLayout="row" fxLayoutAlign="center center">
<div class="flex-item" fxFlex="20%"> </div>
<div class="flex-item" fxFlex> </div>
<div class="flex-item" fxFlex="25px"> </div>
</div>The above Flex Layout usages do not require any external stylesheets nor any custom CSS programming.
Flex Layout also added mediaQuery support into the Layout engine. Integrating mediaQuery features enables the API and your Application's UX to be Responsive to changes in viewport size and orientations.
Responsive layouts have multiple layout configurations. Responsive layouts add extra configurations that override the default configurations. These overrides will be applied dynamically when the viewport size changes to match a specific responsive override.
In our previous sample (above), the Flex Layout API is used to define default, non-responsive flows and sizing. Now let's consider an HTML sample which specifies both default configurations and mobile responsive overrides:
<div class="flex-container"
fxLayout="row"
fxLayout.xs="column"
fxLayoutAlign="center center"
fxLayoutAlign.xs="start">
<div class="flex-item" fxFlex="20%" fxFlex.xs="40%"> </div>
<div class="flex-item" fxFlex> </div>
<div class="flex-item" fxFlex="25px"> </div>
</div>With Responsive configurations, DOM elements can be adjusted [for layout-directions, visibility, and sizing constraints] based on specific viewport sizes (desktop or mobile devices) and orientations (portrait or landscape).
Of course, these configuration can be specified in the CSS. Flex Layout, however, makes it super easy and intuitive to specify these configurations in the HTML layer as HTML element attributes.
Featured Demo
One of the hardest features to implement is a grid layout with specific column spans. Our online demo shows how easy this is!
Live Demo:
Source Code:
Advantages
Compared to the Layout API in Angular Material v1.x, this codebase is easier to maintain and debug. And other more important benefits have also been realized:
- Independent of Angular Material
- No external CSS requirements
- Use provider to supply custom breakpoints
- Notifications for breakpoints changes
- Includes workaround for MediaQuery issues with overlapping breakpoints
- Support (future) for Handset/Tablet and Orientation breakpoints
- Support for ANY Layout injector value (instead of increments for 5)
- Change detection for Layout injector values
- MediaQuery Activation detection
- Support for raw values or interpolated values
- Support for raw, percentage or px-suffix values