Reactive Angular using Flex Layout

<!DOCTYPE html>
<html>

<head>
  <title>Reactive Angular using Flex Layout</title>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">

  <script src="https://unpkg.com/zone.js@0.8.5/dist/zone.js"></script>
  <script src="https://unpkg.com/reflect-metadata@0.1.10/Reflect.js"></script>
  <script src="https://unpkg.com/systemjs@0.19.31/dist/system.js"></script>
  <script src="config.js"></script>
  <script>
    System.import('app')
      .catch(console.error.bind(console));
  </script>
  <link href="https://rawgit.com/angular/material2-builds/master/prebuilt-themes/indigo-pink.css" rel="stylesheet">
</head>

<body>
  <my-app>
    loading...
  </my-app>
</body>

</html>

System.config({
  transpiler: "ts",
  typescriptOptions: {
    emitDecoratorMetadata: true,
    experimentalDecorators: true
  },
  bundles: {
    "npm:rxjs-system-bundle@5.5.2/Rx.system.js": [
      "rxjs",
      "rxjs/*",
      "rxjs/operator/*",
      "rxjs/observable/*",
      "rxjs/scheduler/*",
      "rxjs/symbol/*",
      "rxjs/add/operator/*",
      "rxjs/add/observable/*",
      "rxjs/util/*"
    ]
  },
  map: {
    app: "./src",
    '@angular/animations': 'npm:@angular/animations@5.0.2/bundles/animations.umd.js',
    '@angular/animations/browser': 'npm:@angular/animations@5.0.2/bundles/animations-browser.umd.js',
    '@angular/core': 'npm:@angular/core@5.0.2/bundles/core.umd.js',
    '@angular/common': 'npm:@angular/common@5.0.2/bundles/common.umd.js',
    '@angular/compiler': 'npm:@angular/compiler@5.0.2/bundles/compiler.umd.js',
    '@angular/flex-layout': 'npm:@angular/flex-layout@2.0.0-beta.10-4905443/bundles/flex-layout.umd.js',
    '@angular/platform-browser': 'npm:@angular/platform-browser@5.0.2/bundles/platform-browser.umd.js',
    '@angular/platform-browser/animations': 'npm:@angular/platform-browser@5.0.2/bundles/platform-browser-animations.umd.js',
    '@angular/platform-browser-dynamic': 'npm:@angular/platform-browser-dynamic@5.0.2/bundles/platform-browser-dynamic.umd.js',
    '@angular/http': 'npm:@angular/http@5.0.2/bundles/http.umd.js',
    '@angular/router': 'npm:@angular/router@5.0.2/bundles/router.umd.js',
    'ts': 'npm:plugin-typescript@7.0.6',
    'typescript': 'npm:typescript@2.3.4'
  },
  //packages defines our app package
  packages: {
    app: {
      main: './main.ts',
      defaultExtension: 'ts'
    },
    rxjs: {
      defaultExtension: false
    },
    ts: {
      main: "lib/plugin.js"
    },
    typescript: {
      main: "lib/typescript.js",
      meta: {
        "lib/typescript.js": {
          "exports": "ts"
        }
      }
    }
  },
  paths: {
    'npm:': 'https://unpkg.com/'
  }
});

//main entry point
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { AppModule } from './app';

platformBrowserDynamic().bootstrapModule(AppModule)

import { Component, NgModule, OnInit } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';

// flex-layout
import { FlexLayoutModule } from '@angular/flex-layout';
import { ObservableMedia } from '@angular/flex-layout';

// rxjs
import { Observable } from "rxjs/Observable";
import "rxjs/add/operator/takeWhile";
import "rxjs/add/operator/startWith";
import "rxjs/add/operator/map";
import "rxjs/add/observable/of";

//custom directives for flex-layout
import { CustomShowHideDirective, CustomLayoutDirective, CustomClassDirective, CustomStyleDirective } from './flex-directives'
import { CustomBreakPointsProvider } from './breakpoints'


@Component({
  selector: 'my-app',
  templateUrl: 'src/app.html',
  styleUrls: ['src/app.css',]
})
export class App implements OnInit {
  constructor(public media: ObservableMedia) {}
  
  ngOnInit() {
  }
}

@NgModule({
  imports: [ 
    BrowserAnimationsModule,
    BrowserModule,
    FlexLayoutModule,
  ],
  declarations: [ App, CustomShowHideDirective, CustomLayoutDirective, CustomClassDirective, CustomStyleDirective ],
  providers: [CustomBreakPointsProvider ],
  bootstrap: [ App ]
})
export class AppModule {}

import {DEFAULT_BREAKPOINTS, BREAKPOINTS} from '@angular/flex-layout';

const CUSTOM_BREAKPOINTS = [
  {
    alias: 'sm.landscape',
    suffix: 'SmLandscape',
    mediaQuery: 'screen and (min-width:55em) and (max-width: 80em) and (orientation: landscape)',
    overlapping: true
  }
];

export const CustomBreakPointsProvider = {
  provide: BREAKPOINTS,
  useValue: [...DEFAULT_BREAKPOINTS,...CUSTOM_BREAKPOINTS],
};

import { Directive, ElementRef, Renderer2, Input, IterableDiffers, KeyValueDiffers, Optional, Self } from '@angular/core'
import { NgClass, NgStyle } from '@angular/common'
import {DomSanitizer} from '@angular/platform-browser';
import { ShowHideDirective, negativeOf, LayoutDirective, MediaMonitor, ClassDirective, NgClassType, StyleDirective, NgStyleType } from '@angular/flex-layout'

@Directive({
  selector: `
    [fxHide.sm.landscape],
    [fxShow.sm.landscape],
  `
})
export class CustomShowHideDirective extends ShowHideDirective {
  constructor(monitor: MediaMonitor, @Optional() @Self() protected _layout: LayoutDirective, protected elRef: ElementRef, protected renderer: Renderer2) {
    super(monitor, _layout, elRef, renderer)
  }

  @Input('fxHide.sm.landscape') set hideSmLandscape(val) {
    this._cacheInput("showSmLandscape", negativeOf(val))
  }
  @Input('fxShow.sm.landscape') set showSmLandscape(val) {
    this._cacheInput("showSmLandscape", val)
  }
}


@Directive({
  selector: `
    [fxLayout.sm.landscape]
  `
})
export class CustomLayoutDirective extends LayoutDirective {
  constructor(monitor: MediaMonitor, elRef: ElementRef, renderer: Renderer2) {
    super(monitor, elRef, renderer)
  }
  
  @Input('fxLayout.sm.landscape') set layoutSmLandscape(val) {
    this._cacheInput("layoutSmLandscape", val)
  }
}

@Directive({
  selector: `
    [ngClass.sm.landscape]
  `
})
export class CustomClassDirective extends ClassDirective {
  constructor(protected monitor: MediaMonitor,
              protected _iterableDiffers: IterableDiffers,
              protected _keyValueDiffers: KeyValueDiffers,
              protected _ngEl: ElementRef,
              protected _renderer: Renderer2,
              @Optional() @Self() private _ngClassInstance2: NgClass ) {
    super(monitor, _iterableDiffers, _keyValueDiffers, _ngEl, _renderer, _ngClassInstance2)
  }
  
  @Input('ngClass.sm.landscape') set ngClassSmLandscape(val: NgClassType) {
    this._base.cacheInput("ngClassSmLandscape", val, true)
  }
}

@Directive({
  selector: `
    [ngStyle.sm.landscape],
  `
})
export class CustomStyleDirective extends StyleDirective {
  constructor(protected monitor2: MediaMonitor,
              protected _sanitizer: DomSanitizer,
              protected _ngEl: ElementRef,
              protected _renderer: Renderer2,
              protected _keyValueDiffers: KeyValueDiffers,
              @Optional() @Self() private _ngStyleInstance2: NgStyle ) {
    super(monitor2, _sanitizer, _ngEl, _renderer, _keyValueDiffers, _ngStyleInstance2)
  }
  
  @Input('ngStyle.sm.landscape') set ngStyleSmLandscape(val: NgStyleType) { 
    this._base.cacheInput("ngStyleSmLandscape", val, true)
  }
}

<p>
  <span fxHide="false" fxHide.sm="true">fxHide.sm</span>
  <span fxShow="false" fxShow.sm="true">fxShow.sm</span>
</p>
<p>
  <span fxHide="false" fxHide.sm.landscape="true">fxHide.sm.landscape</span>
  <span fxShow="false" fxShow.sm.landscape="true">fxShow.sm.landscape</span>
</p>
<p>
  <span fxHide="true" fxHide.sm.landscape="false">hack fxShow.sm.landscape</span>
  <span fxShow="true" fxShow.sm.landscape="false">hack fxHide.sm.landscape</span>
</p>
<p>
  <span fxHide fxShow.sm.landscape>hack2 fxShow.sm.landscape</span>
  <span fxShow fxHide.sm.landscape>hack2 fxHide.sm.landscape</span>
</p>
<p>
  <span fxHide="false" fxHide.gt-sm="true">fxHide.gt-sm</span>
  <span fxShow="false" fxShow.gt-sm="true">fxShow.gt-sm</span>
</p>

<span *ngIf="media.isActive('xs')">xs</span>
<span *ngIf="media.isActive('sm')">sm</span>
<span *ngIf="media.isActive('sm.landscape')">sm.landscape</span>
<span *ngIf="media.isActive('md')">md</span>
<span *ngIf="media.isActive('lg')">lg</span>

<div fxLayout="row" fxLayout.lg="column" fxLayout.sm.landscape="column" 
  style="border: 3px solid red"
  ngStyle.lg="border-color: orange"
  ngStyle.sm.landscape="border-color: green">
  <p class="layoutItem" ngClass.sm.landscape="SLlayoutItem">First Item</p>
  <p class="layoutItem" ngClass.lg="LgLayoutItem">Second Item</p>
</div>

.layoutItem {
  border: 1px solid black;
  margin: 2px;
}

.SLlayoutItem {
  background-color: blue;
  color: white;
}

.LgLayoutItem {
  background-color: green;
  color: white;
}