Responsive API

Responsive layouts in material design adapt to any possible screen size. Google's Material Design specifications provide guidance that includes a flexible grid that ensures consistency across layouts, breakpoint details about how content reflows on different screens, and a description of how an app can scale from small to extra-large screens.

Enhancing the Static API

Developers should consult the angular/flex-layout HTML Declarative API for specific Static API details, then simply extend the HTML markup usages by adding the responsive suffixes (as discussed below)!

@angular/flex-layout will automatically handle all the details listening for mediaQuery activations and applying the responsive values to the hosting DOM elements.

Responsive Features

To extend the @angular/flex-layout static API with responsive features, we will first associate specific breakpoint aliases with mediaQuery values.

MediaQueries and Aliases

We can associate breakpoints with mediaQuery definitions using breakpoint alias(es):

breakpoint	mediaQuery
xs	'screen and (max-width: 599px)'
sm	'screen and (min-width: 600px) and (max-width: 959px)'
md	'screen and (min-width: 960px) and (max-width: 1279px)'
lg	'screen and (min-width: 1280px) and (max-width: 1919px)'
xl	'screen and (min-width: 1920px) and (max-width: 5000px)'
lt-sm	'screen and (max-width: 599px)'
lt-md	'screen and (max-width: 959px)'
lt-lg	'screen and (max-width: 1279px)'
lt-xl	'screen and (max-width: 1919px)'
gt-xs	'screen and (min-width: 600px)'
gt-sm	'screen and (min-width: 960px)'
gt-md	'screen and (min-width: 1280px)'
gt-lg	'screen and (min-width: 1920px)'

If we combine the breakpoint alias with the Static Flex-Layout API, we can easily support Responsive breakpoints using a simple markup convention:

The alias is used as suffix extensions to the static API HTML markup!

<api>.<breakpoint alias>="<value>"
[<api>.<breakpoint alias>]="<expression>"

Below is an example usage of the Responsive Layout API:

<div fxLayout='column' class="zero">

  <div fxFlex="33" [fxFlex.md]="box1Width" class="one" ></div>
  <div fxFlex="33" [fxLayout]="direction" fxLayout.md="row" class="two">

    <div fxFlex="22"    fxFlex.md="10px" fxHide.lg                       class="two_one"></div>
    <div fxFlex="205px" fxFlex.md="65"                                    class="two_two"></div>
    <div fxFlex="30px"  fxFlex.md="25"   fxShow [fxHide.md]="hideBox"   class="two_three"></div>

  </div>
  <div fxFlex class="three"></div>

</div>

In the markup above the HTML API directives use both static values and expression bindings; where the values are expressed as raw, percentage, or pixel values.

Note: numerica values not explicitly annotated as px, vw, or vh default to percentage values.

Breakpoint Activation Fallback Algorithm

When a breakpoint is activated and the hosting element does NOT have a responsive API defined for the newly activated breakpoint, the Flex-Layout responsive engine uses a fallback, descending-scan algorithm to determine the replacement activation value.

This algorithm searches:

• For non-overlapping breakpoints: the search scans from largest-to-small breakpoint range to find the closest, matching activation value.
  • (xl, lg, md, sm, xs)
• For overlapping breakpoints: the search scans from smallest -to-largest breakpoint range to find the closest, matching activation value.
  • (gt-lg, gt-md, gt-sm, gt-xs)
  • (lt-xl, lt-lg, lt-md, lt-sm)

Consider the following responsive markup examples:

Example #1

<div fxShow fxHide.xs="false" fxHide.lg="true"> ... </div>

When the activated breakpoint is:

• xl, then both closest, activated match is the default fxShow; so the div is shown
• lg, then the div is hidden (since the value === 'true')
• md, then both closest, activated match is the default fxShow; so the div is shown
• sm, then both closest, activated match is the default fxShow; so the div is shown
• xs, then the div is shown (since the value === 'false')

Example #2

<div fxFlex="50%" fxFlex.gt-sm="100%"> ... </div>

When the activated breakpoint is:

• xl, then both closest, activated match is 'gt-sm' so the div sizing is 100%
• lg, then both closest, activated match is 'gt-sm' so the div sizing is 100%
• md, then both closest, activated match is 'gt-sm' so the div sizing is 100%
• sm, then both closest, activated match is the default fxFlex="50%"; so the div sizing is 50%
• xs, then both closest, activated match is the default fxFlex="50%"; so the div sizing is 50%