API Documentation

HTML API (Declarative)

Below are the links to the documentation pages for each directive within the @angular/flex-layout API.

API Overview:
Introduction to static and responsive API and BreakPoints details.

API for DOM container elements [with 1 or more nested child elements]:

fxLayout:
Defines the flow order of child items within a flexbox container.
<div fxLayout="column"> </div>
fxLayoutWrap :
Defines if child items appear on a single line or on multiple lines within a flexbox container.
<div fxLayoutWrap> </div>
fxLayoutGap:
Defines if child items within a flexbox container should have a gap.
<div fxLayoutGap="10px"> </div>
fxLayoutAlign:
Defines how flexbox items are aligned according to both the main-axis and the cross-axis, within a flexbox container.
<div fxLayoutAlign="start stretch"> </div>

### Child Elements within Containers

API for DOM elements nested within FlexBox container elements:

fxFlex:
This markup specifies the resizing of its host element within a flexbox container flow.
<div fxFlex="1 2 calc(15em + 20px)"></div>
fxFlexOrder:
Defines the order of a flexbox item.
<div fxFlexOrder="2"></div>
fxFlexOffset:
Offset a flexbox item in its parent container flow layout.
<div fxFlexOffset="20px"></div>
fxFlexAlign:
Works like fxLayoutAlign, but applies only to a single flexbox item, instead of all of them.
<div fxFlexAlign="center"></div>
fxFlexFill:
Maximizes width and height of element in a layout container
<div fxFlexFill></div>

### Special Features

API for any DOM element:

fxShow:
This markup specifies if its host element should be displayed (or not).
<div fxShow></div>
fxHide:
This markup specifies if its host element should NOT be displayed.
<div fxHide></div>
class: (deprecated)
ngClass :
Enhances the ngClass directive with support for mediaQuery activations.
<div [ngClass.sm]="{'fxClass-sm': hasStyle}"></div>
style: (deprecated)
ngStyle:
Enhances the ngStyle directive with suport for mediaQuery activations.
<div [ngStyle.xs]="{'font-size.px': 10, color: 'blue'}"></div>

Most of the @angular/flex-layout functionality is provided via Directives. Three (3) programmatic features are published for developer access:

ObservableMedia:
Injectable Observable used to subscribe to MediaQuery activation changes.
constructor(public watcher$:ObservableMedia ) { watcher$.subscribe(...); }
BREAKPOINTS:
Opaque token used to override or extend the default breakpoints with custom MediaQuery breakpoints.
providers: [{provide: BREAKPOINTS, useValue: MY_CUSTOM_BREAKPOINTS }]
BaseFxDirectiveAdapter:
Adapter class useful to extend existing Directives with MediaQuery activation features.
export class ClassDirective extends NgClass { ... }