API Documentation

JavaScript API (Imperative)

Most of the Angular Layout functionality is provided via Directives used declaratively in template HTML. There are two (2) programmatic features, however, that are published for programmatic usages:

• MediaObserver:
  Injectable service used to subscribe to MediaQuery activation changes. You can access its observable through the media$ property

import {MediaObserver} from '@angular/flex-layout';
constructor(public mediaObserver: MediaObserver ) { 
  mediaObserver.media$.subscribe(...);
}

• BREAKPOINT:
  Injection token used to override or extend the default breakpoints with custom MediaQuery breakpoints.

import {BREAKPOINT} from '@angular/flex-layout';
providers: [{provide: BREAKPOINT, useValue: MY_CUSTOM_BREAKPOINTS, multi: true}]

HTML API (Declarative)

The features of Angular Layout are best used declaratively in template HTML. This API has two (2) significant feature sets:

• Static API: Summary of static API features.
• Responsive API: Introducing Responsive API and BreakPoints details.

As each directive (aka API) within the library has its own constraints and options, the links below should be used to navigate to the specific documentation pages for each directive

Containers

This API set applies CSS stylings for DOM container elements with 1 or more nested children:

• fxLayout: Defines the flow order of child items within a flexbox container

<div fxLayout="row" fxLayout.xs="column"></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>

• gdAlignColumns: Aligns the items column-wise

<div gdAlignColumns="start stretch"></div>

• gdAlignRows: Aligns the items row-wise

<div gdAlignRows="start stretch"></div>

• gdAreas: Describes the areas the grid contains

<div gdAreas="area1 | area2 | area3"></div>

• gdAuto: Controls the auto placement for the grid

<div gdAuto="row dense"></div>

• gdColumns: Defines the line names and track sizing functions of the grid columns

<div gdColumns="60px 60px"></div>

• gdRows: Defines the line names and track sizing functions of the grid rows

<div gdRows="60px 60px"></div>

• gdGap: Defines the gap between grid items

<div gdGap="60px 60px"></div>

Child Elements within Containers

This API set applies CSS stylings for a DOM element nested within a DOM container:

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

• gdArea: Marks the element as a CSS Grid area

<div gdArea="area1"></div>

• gdColumn: Specifies a grid item's size and location within the grid column

<div gdColumn="1 / span 2"></div>

• gdRow: Specifies a grid item's size and location within the grid row

<div gdRow="1 / span 2"></div>

• gdGridAlign: Aligns a grid item within its container element

<div gdGridAlign="start stretch"></div>

Special Responsive 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, non-flexbox styles when a specific mediaQuery has activated:

• fxShow: This markup specifies if its host element should be displayed (or not)

<div fxShow [fxShow.xs]="isVisibleOnMobile()"></div>

• fxHide: This markup specifies if its host element should NOT be displayed

<div fxHide [fxHide.gt-sm]="isVisibleOnDesktop()"></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>