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.
  

Containers

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

While the following APIs also add or remove DOM element inline styles, they are NOT FlexBox CSS specific. Instead these are Responsive APIs used to adjust specific styles for a DOM element when a specific mediaQuery has activated:

• 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>

• ngClass :
  Enhances the ngClass directives with class changes based on mediaQuery activations.
  <div [ngClass.sm]="{'fxClass-sm': hasStyle}"></div>.

• ngStyle:
  Enhances the ngStyle directive with style updates based on mediaQuery activations.
  <div [ngStyle.xs]="{'font-size.px': 10, color: 'blue'}"></div>

JavaScript API (Imperative)

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 { ... }