Custom breakpoints for @angular/flex-layout

<!DOCTYPE html>
<html>

  <head>
    <base href="." />
    <title>Custom Breakpoints | Flex-Layout Template</title>
    <link rel="stylesheet" href="assets/style.css" />
    
    <!-- Polyfills -->
    <script src="https://unpkg.com/core-js/client/shim.min.js"></script>
    <script src="https://unpkg.com/zone.js@0.7.4?main=browser"></script>
    <script src="https://unpkg.com/systemjs@0.19.39/dist/system.src.js"></script>

    <script src="lib/config.js"></script>
    <script>
    System.import('app')
      .catch(console.error.bind(console));
  </script>
  </head>

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

</html>

.element-block {
  width: 100%;
}

.element {
  border: 1px solid #000;
  padding: 20px;
}

.one {
  background-color: orange;
  color: white;
}

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

System.config({
  //use typescript for compilation
  transpiler: 'typescript',
  //typescript compiler options
  typescriptOptions: {
      // Copy of compiler options in standard tsconfig.json
      "target": "es5",
      "module": "es2015",
      "moduleResolution": "node",
      "sourceMap": true,
      "emitDecoratorMetadata": true,
      "experimentalDecorators": true,
      "noImplicitAny": true,
      "suppressImplicitAnyIndexErrors": true
  },
  meta: {
      'typescript': {
        "exports": "ts"
      }
    },  
  paths: {
    'npm:': 'https://unpkg.com/'
  },
  //map tells the System loader where to look for things
  map: {
    
    'app': './src',

    '@angular/core': 'npm:@angular/core/bundles/core.umd.js',
    '@angular/common': 'npm:@angular/common/bundles/common.umd.js',
    '@angular/compiler': 'npm:@angular/compiler/bundles/compiler.umd.js',
    '@angular/platform-browser': 'npm:@angular/platform-browser/bundles/platform-browser.umd.js',
    '@angular/platform-browser-dynamic': 'npm:@angular/platform-browser-dynamic/bundles/platform-browser-dynamic.umd.js',
    '@angular/flex-layout' : 'https://rawgit.com/angular/flex-layout-builds/master/bundles/flex-layout.umd.js',
    
    // other libraries
    'rxjs':                      'npm:rxjs',
    'angular-in-memory-web-api': 'npm:angular-in-memory-web-api/bundles/in-memory-web-api.umd.js',
    'typescript':                'npm:typescript@2.0.10/lib/typescript.js',    
  },
  //packages defines our app package
  packages: {
    app: {
      main: './boot.ts',
      defaultExtension: 'ts'
    },
    rxjs: {
      defaultExtension: 'js'
    }
  }
});

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

export function customBreakPoints() {
  console.log(DEFAULT_BREAKPOINTS);
  return DEFAULT_BREAKPOINTS
    .map((it:BreakPoint) => {
      switch(it.alias) {
        case 'xs':
          it.mediaQuery =  'screen and (max-width: 599px)';
          break;
        case 'gt-xs':
          it.mediaQuery =  'screen and (min-width: 600px)';
          break;
        case 'lt-sm':
          it.mediaQuery =  'screen and (max-width: 599px)';
          break;
        case 'sm':
          it.mediaQuery =  'screen and (min-width: 600px) and (max-width: 1023px)';
          break;
        case 'gt-sm':
          it.mediaQuery =  'screen and (min-width: 1024px)';
          break;
        case 'lt-md':
          it.mediaQuery =  'screen and (max-width: 1023px)';
          break;
        case 'md':
          it.mediaQuery =  'screen and (min-width: 1024px) and (max-width: 1439px)';
          break;
        case 'gt-md':
          it.mediaQuery =  'screen and (min-width: 1440px)';
          break;
        case 'lt-lg':
          it.mediaQuery =  'screen and (max-width: 1439px)';
          break;
        case 'lg':
          it.mediaQuery =  'screen and (min-width: 1440px) and (max-width: 1919px)';
          break;
        case 'gt-lg':
          it.mediaQuery =  'screen and (min-width: 1920px)';
          break;
        case 'lt-xl':
          it.mediaQuery =  'screen and (max-width: 1919px)';
          break;
        case 'xl':
          it.mediaQuery =  'screen and (min-width: 1920px) and (max-width: 5000px)';
          break;
        default:
          break;
      }
      return DEFAULT_BREAKPOINTS;
    });
}

import { NgModule } from '@angular/core';
import { BREAKPOINTS } from '@angular/flex-layout'
import { customBreakPoints } from './custom-breakpoints.component';

@NgModule({
  providers: [
    {
      provide : BREAKPOINTS,
      useFactory : customBreakPoints
    }
  ]
})
export class CustomBreakPointsModule { }

import {Component, NgModule} from '@angular/core'
import {BrowserModule} from '@angular/platform-browser'
import * as Rx from 'rxjs/Rx';

import {FlexLayoutModule} from "@angular/flex-layout";
import {CustomBreakPointsModule} from './custom-breakpoints.module';

import { TestApp} from "./test-app";

@NgModule({
  imports: [ 
    BrowserModule,
    FlexLayoutModule,
    CustomBreakPointsModule
  ],
  declarations: [ TestApp ],
  bootstrap: [ TestApp ]
})
export class TestAppModule {}

import {Component} from '@angular/core'

@Component({
  selector: 'test-app',
  template: `
    <div class="element-block" fxLayout="row" fxLayout.gt-sm="column">
      <div class="element one" fxFlex="33">Element One</div>
      <div class="element two" fxFlex="33">Element Two</div>
      <div class="element three" fxFlex="33">Element Three</div>
    </div>
  `
})
export class TestApp {
   let windowWidth = window.innerWidth;
   console.log(windowWidth);
}

import {platformBrowserDynamic} from '@angular/platform-browser-dynamic';
import {TestAppModule} from './app/test-app-module';

platformBrowserDynamic().bootstrapModule(TestAppModule);