Skip to content

Instantly share code, notes, and snippets.

@robertpenner
Forked from johnlindquist/README.md
Created March 17, 2016 04:24
Show Gist options
  • Save robertpenner/ed00d848f848ecd25f1e to your computer and use it in GitHub Desktop.
Save robertpenner/ed00d848f848ecd25f1e to your computer and use it in GitHub Desktop.
Angular 2 Clock

Angular2 Starter Gist Run

System.config({
//use typescript for compilation
transpiler: 'typescript',
//typescript compiler options
typescriptOptions: {
emitDecoratorMetadata: true
},
//map tells the System loader where to look for things
map: {
app: './src',
'@ngrx/store': 'https://npmcdn.com/@ngrx/store@1.3.3/dist/index.js'
},
//packages defines our app package
packages: {
app: {
main: './main.ts',
defaultExtension: 'ts'
}
}
});
<!DOCTYPE html>
<html>
<head>
<title>angular2 playground</title>
<link rel="stylesheet" href="style.css" />
<script src="https://code.angularjs.org/2.0.0-beta.9/angular2-polyfills.js"></script>
<script src="https://code.angularjs.org/tools/system.js"></script>
<script src="https://code.angularjs.org/tools/typescript.js"></script>
<script src="config.js"></script>
<script src="https://code.angularjs.org/2.0.0-beta.9/Rx.js"></script>
<script src="https://code.angularjs.org/2.0.0-beta.9/angular2.dev.js"></script>
<script src="https://code.angularjs.org/2.0.0-beta.9/http.dev.js"></script>
<script src="https://code.angularjs.org/2.0.0-beta.9/router.dev.js"></script>
<script>
System.import('app')
.catch(console.error.bind(console));
</script>
</head>
<body>
<app></app>
</body>
</html>
import {Component} from 'angular2/core';
import {bootstrap} from 'angular2/platform/browser';
import {Observable} from 'rxjs/Rx';
@Component({
selector: 'app',
template: `
{{clock | async | date:'medium'}}
`
})
export class App {
clock = Observable
.interval(1000)
.map(()=> new Date());
}
bootstrap(App);
/* Styles go here */
body{
font-family: sans-serif;
}
@KevinBeckers
Copy link

Works like a charm! Thanks.

@gobiit25
Copy link

It is working fine.Thanks.

@Zamay
Copy link

Zamay commented Sep 5, 2017

Thanks))
PS: can someone come in handy?! =)
The format value can also be one of the following predefined formats:
"short" same as "M/d/yy h:mm a" (1/5/16 9:05 AM)
"medium" same as "MMM d, y h:mm:ss a" (Jan 5, 2016 9:05:05 AM)
"shortDate" same as "M/d/yy" (1/5/16)
"mediumDate" same as "MMM d, y" (Jan 5, 2016)
"longDate" same as "MMMM d, y" (January 5, 2016)
"fullDate" same as "EEEE, MMMM d, y" (Tuesday, January 5, 2016)
"shortTime" same as "h:mm a" (9:05 AM)
"mediumTime" same as "h:mm:ss a" (9:05:05 AM)

@netwrkx
Copy link

netwrkx commented Dec 1, 2017

doesnt work when i use
clock = Observable .interval(1000) .map(()=> new Date(1512151753372)); //converting timestamp
any reason why

Copy link

ghost commented Apr 25, 2018

Beautiful and simple. Love it.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment