Adaptive Layouts

Several AngularJS Material applications: Material-Adaptive have been implemented using custom Flexbox CSS. These efforts illustrated the needs and features within a responsive, adaptive application.

• Pesto
• Shrine

Different from responsive layouts where components change sizes and positions, the concepts of Adaptive layouts provide for UX where different components may be used for different breakpoints.

Animations can also be extended to support MediaQuery activations: different animations will run for different viewport sizes.

Developers can use the following directives to achieve some Adaptive UX goals:

• fxHide
• fxShow
• ngIf

For examples of fxHide usages in Adaptive layouts, please review the demo Show & Hide Directives:

• Demo
• Source

---

Core Directives + Responsive Features

Responsive features for core Angular directives:

• [ngStyle.<alias>]=""
• [ngClass.<alias>]=""

Here is the current solution to enable responsive/adaptive features with *ngIf:

import { Component } from '@angular/core';
import { ObservableMedia, MediaChange } from '@angular/flex-layout';

@Component({
  selector: 'my-mobile-component',
  template: `
      <div *ngIf="media.isActive('xs')">
         This content is only shown on Mobile devices
      </div>
      <footer>
         Current state: {{ }}
      </footer>
  `
})
export class MyMobileComponent {
  public state = '';
  constructor(public media: ObservableMedia) {
    media.asObservable()
      .subscribe((change: MediaChange) => {
        this.state = change ? `'${change.mqAlias}' = (${change.mediaQuery})` : '';
    });
  }
}