<!DOCTYPE html>
<html>
<head>
<base href="." />
<script type="text/javascript" charset="utf-8">
window.AngularVersionForThisPlunker = 'latest'
</script>
<title>angular playground</title>
<link rel="stylesheet" href="style.css" />
<script src="https://unpkg.com/core-js@2.4.1/client/shim.min.js"></script>
<script src="https://unpkg.com/zone.js/dist/zone.js"></script>
<script src="https://unpkg.com/zone.js/dist/long-stack-trace-zone.js"></script>
<script src="https://unpkg.com/reflect-metadata@0.1.3/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>
</head>
<body>
<my-app>
loading...
</my-app>
</body>
</html>
/* Styles go here */
html, body {
display: flex;
}
.header {
position: fixed;
width: 100%;
height: 150px;
left: 0;
top: 0;
transition: transform 0.7s .1s ease;
backface-visibility: hidden;
background-color: #252830;
z-index: 2000;
}
.main-menu li {
list-style-type: none;
display: inline-block;
padding: 1rem;
}
.main-menu li a {
color: white;
text-decoration: none;
}
.main-content {
padding-top: 10rem;
}
.scrolled {
transform: translate(0, -100%);
backface-visibility: hidden;
}
### Angular Starter Plunker - Typescript
var angularVersion;
if(window.AngularVersionForThisPlunker === 'latest'){
angularVersion = ''; //picks up latest
}
else {
angularVersion = '@' + window.AngularVersionForThisPlunker;
}
System.config({
//use typescript for compilation
transpiler: 'typescript',
//typescript compiler options
typescriptOptions: {
emitDecoratorMetadata: true
},
paths: {
'npm:': 'https://unpkg.com/'
},
//map tells the System loader where to look for things
map: {
'app': './src',
'@angular/core': 'npm:@angular/core'+ angularVersion + '/bundles/core.umd.js',
'@angular/common': 'npm:@angular/common' + angularVersion + '/bundles/common.umd.js',
'@angular/compiler': 'npm:@angular/compiler' + angularVersion + '/bundles/compiler.umd.js',
'@angular/platform-browser': 'npm:@angular/platform-browser' + angularVersion + '/bundles/platform-browser.umd.js',
'@angular/platform-browser-dynamic': 'npm:@angular/platform-browser-dynamic' + angularVersion + '/bundles/platform-browser-dynamic.umd.js',
'@angular/http': 'npm:@angular/http' + angularVersion + '/bundles/http.umd.js',
'@angular/router': 'npm:@angular/router' + angularVersion +'/bundles/router.umd.js',
'@angular/forms': 'npm:@angular/forms' + angularVersion + '/bundles/forms.umd.js',
'@angular/animations': 'npm:@angular/animations' + angularVersion + '/bundles/animations.umd.js',
'@angular/platform-browser/animations': 'npm:@angular/platform-browser' + angularVersion + '/bundles/platform-browser-animations.umd.js',
'@angular/animations/browser': 'npm:@angular/animations' + angularVersion + '/bundles/animations-browser.umd.js',
'@angular/core/testing': 'npm:@angular/core' + angularVersion + '/bundles/core-testing.umd.js',
'@angular/common/testing': 'npm:@angular/common' + angularVersion + '/bundles/common-testing.umd.js',
'@angular/compiler/testing': 'npm:@angular/compiler' + angularVersion + '/bundles/compiler-testing.umd.js',
'@angular/platform-browser/testing': 'npm:@angular/platform-browser' + angularVersion + '/bundles/platform-browser-testing.umd.js',
'@angular/platform-browser-dynamic/testing': 'npm:@angular/platform-browser-dynamic' + angularVersion + '/bundles/platform-browser-dynamic-testing.umd.js',
'@angular/http/testing': 'npm:@angular/http' + angularVersion + '/bundles/http-testing.umd.js',
'@angular/router/testing': 'npm:@angular/router' + angularVersion + '/bundles/router-testing.umd.js',
'tslib': 'npm:tslib@1.6.1',
'rxjs': 'npm:rxjs',
'typescript': 'npm:typescript@2.2.1/lib/typescript.js'
},
//packages defines our app package
packages: {
app: {
main: './main.ts',
defaultExtension: 'ts'
},
rxjs: {
defaultExtension: 'js'
}
}
});
//main entry point
import {platformBrowserDynamic} from '@angular/platform-browser-dynamic';
import {AppModule} from './app';
platformBrowserDynamic().bootstrapModule(AppModule)
//our root app component
import {Component, NgModule, VERSION, HostListener, Inject } from '@angular/core';
import {BrowserModule} from '@angular/platform-browser';
import { DOCUMENT } from '@angular/platform-browser';
@Component({
selector: 'my-app',
templateUrl: './app.html',
styleUrls: ['./style.css']
})
export class App {
public isScrolled = false;
constructor(@Inject(DOCUMENT) private document: any) {
}
@HostListener('window:scroll', [])
onWindowScroll() {
console.log("Scrolling");
const number = this.document.body.scrollTop;
if (number > 150) {
this.isScrolled = true;
} else if (this.isScrolled && number < 10) {
this.isScrolled = false;
}
}
}
@NgModule({
imports: [ BrowserModule ],
declarations: [ App ],
bootstrap: [ App ]
})
export class AppModule {}
<header class="header" [class.scrolled]="isScrolled">
<nav>
<ul class="main-menu">
<li><a href="#">About us</a></li>
<li><a href="#">Work</a></li>
</ul>
</nav>
</header>
<div class="main-content">
Spend all night ensuring people don't sleep sleep all day burrow under covers
If it fits, i sits plays league of legends sun bathe
Cat ipsum dolor sit amet, the dog smells bad. Scratch leg; meow for can opener to feed me kitty scratches couch bad kitty lies down purr howl uncontrollably for no reason. Peer out window, chatter at birds, lure them to mouth touch water with paw then recoil in horror use lap as chair roll on the floor purring your whiskers off. Bleghbleghvomit my furball really tie the room together. Scream for no reason at 4 am. Vommit food and eat it again sleep on dog bed, force dog to sleep on floor. Lie in the sink all day mew cereal boxes make for five star accommodation or stares at human while pushing stuff off a table. Steal the warm chair right after you get up nap all day, and i am the best meow immediately regret falling into bathtub or scratch at the door then walk away. Wake up human for food at 4am slap kitten brother with paw put toy mouse in food bowl run out of litter box at full speed hopped up on catnip, or lick plastic bags thinking longingly about tuna brine. Intrigued by the shower lay on arms while you're using the keyboard pose purrfectly to show my beauty, for i cry and cry and cry unless you pet me, and then maybe i cry just for fun so refuse to leave cardboard box so friends are not food but burrow under covers. Cat is love, cat is life attack the dog then pretend like nothing happened, so with tail in the air. Jump five feet high and sideways when a shadow moves. Instantly break out into full speed gallop across the house for no reason my left donut is missing, as is my right woops poop hanging from butt must get rid run run around house drag poop on floor maybe it comes off woops left brown marks on floor human slave clean lick butt now. Destroy couch as revenge stare out the window. Chase mice meow meow, i tell my human, but scream for no reason at 4 am. Plop down in the middle where everybody walks eat the fat cats food. Jump five feet high and sideways when a shadow moves sleep in the bathroom sink please stop looking at your phone and pet me and eat grass, throw it back up put butt in owner's face and attack the dog then pretend like nothing happened lick plastic bags. Chirp at birds asdflkjaertvlkjasntvkjn (sits on keyboard) or lies down . Fooled again thinking the dog likes me ears back wide eyed jumps off balcony gives owner dead mouse at present then poops in litter box snatches yarn and fights with dog cat chases laser then plays in grass finds tiny spot in cupboard and sleeps all day jumps in bathtub and meows when owner fills food dish the cat knocks over the food dish cat slides down the water slide and into pool and swims even though it does not like water small kitty warm kitty little balls of fur. Chase red laser dot kitty loves pigs lick butt and make a weird face, climb leg eat half my food and ask for more yet meowwww and have secret plans.
Spend all night ensuring people don't sleep sleep all day burrow under covers
If it fits, i sits plays league of legends sun bathe
Cat ipsum dolor sit amet, the dog smells bad. Scratch leg; meow for can opener to feed me kitty scratches couch bad kitty lies down purr howl uncontrollably for no reason. Peer out window, chatter at birds, lure them to mouth touch water with paw then recoil in horror use lap as chair roll on the floor purring your whiskers off. Bleghbleghvomit my furball really tie the room together. Scream for no reason at 4 am. Vommit food and eat it again sleep on dog bed, force dog to sleep on floor. Lie in the sink all day mew cereal boxes make for five star accommodation or stares at human while pushing stuff off a table. Steal the warm chair right after you get up nap all day, and i am the best meow immediately regret falling into bathtub or scratch at the door then walk away. Wake up human for food at 4am slap kitten brother with paw put toy mouse in food bowl run out of litter box at full speed hopped up on catnip, or lick plastic bags thinking longingly about tuna brine. Intrigued by the shower lay on arms while you're using the keyboard pose purrfectly to show my beauty, for i cry and cry and cry unless you pet me, and then maybe i cry just for fun so refuse to leave cardboard box so friends are not food but burrow under covers. Cat is love, cat is life attack the dog then pretend like nothing happened, so with tail in the air. Jump five feet high and sideways when a shadow moves. Instantly break out into full speed gallop across the house for no reason my left donut is missing, as is my right woops poop hanging from butt must get rid run run around house drag poop on floor maybe it comes off woops left brown marks on floor human slave clean lick butt now. Destroy couch as revenge stare out the window. Chase mice meow meow, i tell my human, but scream for no reason at 4 am. Plop down in the middle where everybody walks eat the fat cats food. Jump five feet high and sideways when a shadow moves sleep in the bathroom sink please stop looking at your phone and pet me and eat grass, throw it back up put butt in owner's face and attack the dog then pretend like nothing happened lick plastic bags. Chirp at birds asdflkjaertvlkjasntvkjn (sits on keyboard) or lies down . Fooled again thinking the dog likes me ears back wide eyed jumps off balcony gives owner dead mouse at present then poops in litter box snatches yarn and fights with dog cat chases laser then plays in grass finds tiny spot in cupboard and sleeps all day jumps in bathtub and meows when owner fills food dish the cat knocks over the food dish cat slides down the water slide and into pool and swims even though it does not like water small kitty warm kitty little balls of fur. Chase red laser dot kitty loves pigs lick butt and make a weird face, climb leg eat half my food and ask for more yet meowwww and have secret plans.
Spend all night ensuring people don't sleep sleep all day burrow under covers
If it fits, i sits plays league of legends sun bathe
Cat ipsum dolor sit amet, the dog smells bad. Scratch leg; meow for can opener to feed me kitty scratches couch bad kitty lies down purr howl uncontrollably for no reason. Peer out window, chatter at birds, lure them to mouth touch water with paw then recoil in horror use lap as chair roll on the floor purring your whiskers off. Bleghbleghvomit my furball really tie the room together. Scream for no reason at 4 am. Vommit food and eat it again sleep on dog bed, force dog to sleep on floor. Lie in the sink all day mew cereal boxes make for five star accommodation or stares at human while pushing stuff off a table. Steal the warm chair right after you get up nap all day, and i am the best meow immediately regret falling into bathtub or scratch at the door then walk away. Wake up human for food at 4am slap kitten brother with paw put toy mouse in food bowl run out of litter box at full speed hopped up on catnip, or lick plastic bags thinking longingly about tuna brine. Intrigued by the shower lay on arms while you're using the keyboard pose purrfectly to show my beauty, for i cry and cry and cry unless you pet me, and then maybe i cry just for fun so refuse to leave cardboard box so friends are not food but burrow under covers. Cat is love, cat is life attack the dog then pretend like nothing happened, so with tail in the air. Jump five feet high and sideways when a shadow moves. Instantly break out into full speed gallop across the house for no reason my left donut is missing, as is my right woops poop hanging from butt must get rid run run around house drag poop on floor maybe it comes off woops left brown marks on floor human slave clean lick butt now. Destroy couch as revenge stare out the window. Chase mice meow meow, i tell my human, but scream for no reason at 4 am. Plop down in the middle where everybody walks eat the fat cats food. Jump five feet high and sideways when a shadow moves sleep in the bathroom sink please stop looking at your phone and pet me and eat grass, throw it back up put butt in owner's face and attack the dog then pretend like nothing happened lick plastic bags. Chirp at birds asdflkjaertvlkjasntvkjn (sits on keyboard) or lies down . Fooled again thinking the dog likes me ears back wide eyed jumps off balcony gives owner dead mouse at present then poops in litter box snatches yarn and fights with dog cat chases laser then plays in grass finds tiny spot in cupboard and sleeps all day jumps in bathtub and meows when owner fills food dish the cat knocks over the food dish cat slides down the water slide and into pool and swims even though it does not like water small kitty warm kitty little balls of fur. Chase red laser dot kitty loves pigs lick butt and make a weird face, climb leg eat half my food and ask for more yet meowwww and have secret plans.
</div>