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>

# Reactive Angular

Create a responsibe MdGridList using Angular, Angular Material and Flex Layout.

System.config({
  transpiler: "ts",
  typescriptOptions: {
    emitDecoratorMetadata: true,
    experimentalDecorators: true
  },
  bundles: {
    "npm:rxjs-system-bundle@5.1.1/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@4.1.0/bundles/animations.umd.js',
    '@angular/animations/browser': 'npm:@angular/animations@4.1.0/bundles/animations-browser.umd.js',
    '@angular/core': 'npm:@angular/core@4.1.0/bundles/core.umd.js',
    '@angular/common': 'npm:@angular/common@4.1.0/bundles/common.umd.js',
    '@angular/compiler': 'npm:@angular/compiler@4.1.0/bundles/compiler.umd.js',
    '@angular/flex-layout': 'npm:@angular/flex-layout@2.0.0-beta.8/bundles/flex-layout.umd.js',
    '@angular/platform-browser': 'npm:@angular/platform-browser@4.1.0/bundles/platform-browser.umd.js',
    '@angular/platform-browser/animations': 'npm:@angular/platform-browser@4.1.0/bundles/platform-browser-animations.umd.js',
    '@angular/platform-browser-dynamic': 'npm:@angular/platform-browser-dynamic@4.1.0/bundles/platform-browser-dynamic.umd.js',
    '@angular/http': 'npm:@angular/http@4.1.0/bundles/http.umd.js',
    '@angular/router': 'npm:@angular/router@3.4.1/bundles/router.umd.js',
    '@angular/forms': 'npm:@angular/forms@4.1.0/bundles/forms.umd.js',
    '@angular/material': 'npm:@angular/material@2.0.0-beta.3/bundles/material.umd.js',
    //'rxjs': 'npm:rxjs@5.3.0/bundles/Rx.js',
    'ts': 'npm:plugin-typescript@7.0.6',
    'typescript': 'npm:typescript@2.2.1'
  },
  //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';

// material
import { MdGridListModule } from '@angular/material';

// 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";


@Component({
  selector: 'my-app',
  template: `
    <h1>Responsive Angular</h1>
    <md-grid-list [cols]="cols | async" gutterSize="16px">
      <md-grid-tile>1</md-grid-tile>
      <md-grid-tile>2</md-grid-tile>
      <md-grid-tile>3</md-grid-tile>
      <md-grid-tile>4</md-grid-tile>
    </md-grid-list>
  `,
  styleUrls: ["./src/styles.scss"]
})
export class App implements OnInit {
  
  /**
   * The number of colums in the md-grid-list directive.
   */
  public cols: Observable<number>;
  
  constructor(private observableMedia: ObservableMedia) {}
  
  ngOnInit() {
    const grid = new Map([
      ["xs", 1],
      ["sm", 2],
      ["md", 2],
      ["lg", 3],
      ["xl", 3]
    ]);
    let start: number;
    grid.forEach((cols, mqAlias) => {
      if (this.observableMedia.isActive(mqAlias)) {
        start = cols;
      }
    });
    this.cols = this.observableMedia.asObservable()
      .map(change => grid.get(change.mqAlias))
      .startWith(start);
  }
}

@NgModule({
  imports: [ 
    BrowserAnimationsModule,
    BrowserModule,
    FlexLayoutModule,
    MdGridListModule
  ],
  declarations: [ App ],
  bootstrap: [ App ]
})
export class AppModule {}

md-grid-tile {
  background: #f5f5f5;
}