<!DOCTYPE html>
<html>

<head>
  <title>Angular 4.1.3 HostListener</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.20.12/dist/system.js"></script>
  <script src="config.js"></script>
  <script>
    System.import('app')
      .catch(console.error.bind(console));
  </script>
</head>

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

</html>
# Angular 4.1.0 + TypeScript 2.2.1 + Flex Layout Plunker Starter Kit

Get your Angular on with Flex Layout and kick butt!
System.config({
  transpiler: "ts",
  typescriptOptions: {
    emitDecoratorMetadata: true,
    experimentalDecorators: true
  },
  map: {
    app: "./src",
    '@angular/core': 'npm:@angular/core@4.1.3/bundles/core.umd.js',
    '@angular/common': 'npm:@angular/common@4.1.3/bundles/common.umd.js',
    '@angular/compiler': 'npm:@angular/compiler@4.1.3/bundles/compiler.umd.js',
    '@angular/platform-browser': 'npm:@angular/platform-browser@4.1.3/bundles/platform-browser.umd.js',
    '@angular/platform-browser-dynamic': 'npm:@angular/platform-browser-dynamic@4.1.3/bundles/platform-browser-dynamic.umd.js',
    '@angular/http': 'npm:@angular/http@4.1.3/bundles/http.umd.js',
    '@angular/router': 'npm:@angular/router@4.1.3/bundles/router.umd.js',
    '@angular/forms': 'npm:@angular/forms@4.1.3/bundles/forms.umd.js',
    'rxjs': 'npm:rxjs',
    '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: 'js'
    },
    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, HostListener, Inject, NgModule, OnInit } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { DOCUMENT } from '@angular/platform-browser';
import { WINDOW_PROVIDERS, WINDOW } from "./window.service";

@Component({
  selector: 'my-app',
  template: `
    <p>Lorem ipsum dolor sit amet, architecto at diam, commodo duis, pellentesque erat dis, taciti orci proin porta tellus in, at eget viverra. Quis urna magna at, eu dictum libero, in tellus velit eu elit, nulla risus felis ac habitant wisi mus, lectus semper sit elementum. Eleifend libero, viverra ligula torquent donec fringilla aliquam, quisque ut morbi, scelerisque cum dictum dis aliquam neque. A nec vel, volutpat gravida rutrum vel massa diam, odio mauris. Integer quisque suscipit ac, vitae ante volutpat, risus ut nisl massa.
Proin molestie amet duis non sit, pede justo, quisque ac nam lorem molestie metus proin. Eu dolor magnis elit duis etiam, donec scelerisque in quam tempor mauris, viverra sit augue odio, venenatis ut, lacus volutpat feugiat eu maecenas aenean elit. Pellentesque sapien justo ligula. Ut nunc sit cursus duis eleifend, proin arcu non mauris fermentum risus, morbi tellus. Nullam id et et urna, iaculis consectetuer lorem libero eleifend.
Pellentesque duis porttitor auctor magna morbi, tincidunt molestie a dolor nunc donec lectus. Tellus erat suscipit mattis sodales in cum. Interdum varius risus, morbi netus temporibus, aliquet erat dui sed lorem magnis interdum, amet at luctus netus. Fringilla risus est eget felis, commodo aliquam, wisi integer dui per ornare duis, nec id nonummy dolor nulla. Nisl id dignissim, eu nonummy dui, euismod nunc lobortis felis at orci.
Ac vulputate imperdiet diam nam quam elit, pulvinar purus sem mus accumsan nam, et malesuada lacinia eros donec sodales, pulvinar integer in nulla integer. Sodales a condimentum commodo erat, soluta sapien, arcu quam, varius pellentesque in. Erat et tempus, montes turpis sed convallis eu nisl, odio in, ante lacus. Ullamcorper felis, mauris magnam magna suscipit condimentum. Eros nunc dictum, praesent ornare mauris, vestibulum nullam leo aenean nulla in dolor, sed nec sapien nibh et, viverra et.
Nulla massa, massa quis quis faucibus et. Et ipsum aliquam lectus vitae vulputate. Pede penatibus lorem erat malesuada non, id a velit in curabitur, eros elit gravida vestibulum sem. Neque amet tempor massa sed, vitae erat phasellus et dignissim. Libero leo. Pellentesque eu mauris vitae ullamcorper ante wisi, lectus sagittis vitae. Leo a. Ullamcorper etiam nunc vel ante, proin pulvinar justo, ipsum dictum, laoreet tristique nisl elit massa maecenas in. Sapien sem viverra id molestie, id consectetuer ante ultricies ut vel integer, arcu nunc suspendisse ut, volutpat interdum, iaculis dolor tempus. Neque at vestibulum nisl, eros massa porttitor accumsan neque, mi at nulla sed sed pede vel, non eros mollis lorem ut, tincidunt aptent blandit aenean arcu quam. Vitae justo sed adipiscing quis volutpat lectus, scelerisque curabitur sit quis ut, nec ipsum fusce, fringilla mauris, nesciunt quis sociosqu fringilla bibendum.
Ipsum donec lobortis ut a, est amet at id. Sagittis massa consequat mauris at ultricies lobortis. Vestibulum dolor lacus adipiscing eu massa ligula, amet justo hendrerit ipsum eu a, aut arcu taciti. Massa id, pede urna, id pede, luctus aliquet rhoncus lacus vel duis rutrum, nunc in. Fringilla magna lacus proin dolor, eu nunc imperdiet, mi orci, at leo commodo. Orci lorem interdum ac elit metus.
Urna commodo. Ante nibh quod lorem, nunc dolor aliquam laoreet feugiat, sodales molestie. Nullam tellus magna augue suspendisse fermentum. Posuere erat, enim aliquam dolor. Magna justo justo vitae, donec fermentum, nascetur vestibulum proin vestibulum tortor adipiscing, faucibus condimentum ultrices pellentesque sed arcu, amet ligula dictumst. Urna pretium arcu elementum. Id nunc quam pretium, fusce eros. Eros odio placerat ipsum massa aliquet, elit justo at urna sunt.
Phasellus phasellus a fusce sed natoque egestas, maecenas dolor eu ultrices erat libero. Risus sem, adipiscing tellus scelerisque in nibh consectetuer, varius amet praesent aliquet, duis urna quisque sit turpis. Sem vivamus praesent, risus odio massa, semper mauris nibh vestibulum arcu nullam, risus massa lectus tortor euismod vel. Ipsum id. Aliquam tincidunt cras porta porta odio et, velit non dolor lacinia blandit. Sodales maecenas.
Pede integer fringilla enim imperdiet, at sem, sed lectus sapien, laoreet nostra rutrum massa. Ultrices sed nunc justo amet, ut mattis venenatis pretium blandit, magna duis facilisis. Consequat accumsan nec auctor quisque, sed neque. Tortor dis purus eu beatae, suspendisse pharetra, non bibendum quis amet. Quisque velit penatibus, sed non lacus viverra. Erat habitant urna nunc, nostrum et massa, dolor imperdiet nullam risus. Ligula suspendisse mauris dui commodo. Fermentum nonummy lorem praesent, vel eget donec a auctor, tortor dictumst libero, vestibulum mauris eleifend feugiat cursus, morbi curabitur quis tellus dolor orci. Suscipit quis sit, purus egestas aliquam eget sed vivamus, ut praesent dapibus sit consectetuer erat pellentesque, laoreet vitae dui id fringilla hendrerit risus. Vitae posuere penatibus dui.
Elit vivamus id commodo. Pulvinar eu nulla fringilla mattis, vitae libero justo nec, ante commodi cras wisi sed phasellus elementum, ut arcu lacinia, aptent arcu tellus. Ante magna, libero rutrum. Urna fusce urna. Vehicula magna, ut tortor cras eros, dictum nec, et dolor egestas tortor integer leo montes. Imperdiet mi malesuada, at sit quam diam. Elit integer ultrices, qui dolore laoreet pellentesque urna phasellus, nunc ligula sed nibh eget.</p>
  `,
  styleUrls: ['./src/styles.css']
})
export class App implements OnInit {
  
  constructor(
    @Inject(DOCUMENT) private document: Document,
    @Inject(WINDOW) private window: Window
    ) {}
  
  ngOnInit() {}
  
  @HostListener("window:scroll", [])
  onWindowScroll() {
    const offset = this.window.pageYOffset || this.document.documentElement.scrollTop || this.document.body.scrollTop || 0;
    console.log(offset);
  }
}

@NgModule({
  imports: [ 
    BrowserModule
  ],
  declarations: [ App ],
  bootstrap: [ App ],
  providers: [ WINDOW_PROVIDERS ]
})
export class AppModule {}
.row-example {
  border: 1px solid #000;
  height: 200px;
  
  div {
    background: #f5f5f5;
    border: 1px solid #000;
    padding: 50px;
    margin: 0 16px;
  }
}

.column-example {
  border: 1px solid #000;
  padding: 16px;
  
  div {
    background: #f5f5f5;
    border: 1px solid #000;
    padding: 50px;
    margin: 16px 0;
  }
}
import { isPlatformBrowser } from "@angular/common";
import { ClassProvider, FactoryProvider, InjectionToken, PLATFORM_ID } from '@angular/core';

/* Create a new injection token for injecting the window into a component. */
export const WINDOW = new InjectionToken('WindowToken');

/* Define abstract class for obtaining reference to the global window object. */
export abstract class WindowRef {

  get nativeWindow(): Window | Object {
    throw new Error('Not implemented.');
  }

}

/* Define class that implements the abstract class and returns the native window object. */
export class BrowserWindowRef extends WindowRef {

  constructor() {
    super();
  }

  get nativeWindow(): Window | Object {
    return window;
  }

}

/* Create an factory function that returns the native window object. */
function windowFactory(browserWindowRef: BrowserWindowRef, platformId: Object): Window | Object {
  if (isPlatformBrowser(platformId)) {
    return browserWindowRef.nativeWindow;
  }
  return new Object();
}

/* Create a injectable provider for the WindowRef token that uses the BrowserWindowRef class. */
const browserWindowProvider: ClassProvider = {
  provide: WindowRef,
  useClass: BrowserWindowRef
};

/* Create an injectable provider that uses the windowFactory function for returning the native window object. */
export const windowProvider: FactoryProvider = {
  provide: WINDOW,
  useFactory: windowFactory,
  deps: [ WindowRef, PLATFORM_ID ]
};

/* Create an array of providers. */
export const WINDOW_PROVIDERS = [
  browserWindowProvider,
  windowProvider
];