Adaptive Layouts

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

• Pesto
• Shring

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 fx-hide usages in Adaptive layouts, please review the demo Show & Hide Directives:

• Demo
• Source

---

Core Directives + Responsive Features

Responsive features for core Angular directives:

• *ngIf.<breakpoint alias>="" is not yet supported.
• [ngStyle.<alias>]="" is not yet supported.
• [ngClass.<alias>]="" is not yet supported.

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

import {ObservableMediaService} 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( @Inject(ObservableMediaService) public media) {
    media.asObservable()
      .subscribe((change:MediaChange) => {
        this.state = change ? `'${change.mqAlias}' = (${change.mediaQuery})` : ""
      });
  }
}

NOTE: The above import will not work for Beta.4. Developers must use the following as a work-around until Beta.5 is released:

import {ObservableMediaService} from '@angular/flex-layout/media-query/observable-media-service';