Angular 2 date format

<!DOCTYPE html>
<html>

<head>
  <script src="https://jspm.io/system@0.18.17.js"></script>
  <script src="https://code.angularjs.org/2.0.0-alpha.37/angular2.min.js"></script>
  <script>
    System.config({
      paths: {
        'main.js': 'main.js'
      }
    });
    System.import('main.js');
  </script>
</head>

<body>
  <dateTime></dateTime>
  
  <div><br/><br/><a href="http://www.code-sample.com" target="_blank">Go more...</a></div>
</body>

</html>

/* Styles go here */

import {Component, View, bootstrap} from 'angular2/angular2';

@Component({
  selector: 'dateTime'
})

@View({
  templateUrl: 'dates.html'
})

// date controller
class Dates {
  
  date: Date;

  //date constructor
  constructor() {
    this.date = new Date();
  } 
}

bootstrap(Dates);

<!-- dates.html -->
<h1>Date Time</h1>
<p>{{date | date:'dd MM yyyy'}}</p>
<p>{{date | date:'dd MM yyyy hh:mm'}}</p>
<p>{{date | date:'dd MM yyyy hh:mm:ss'}}</p>
<p>{{date | date:'MM dd yy'}}</p>
<p>{{date | date:'MM dd yyyy'}}</p>
<p>{{date | date:'mediumDate'}}</p>
<p>{{date | date:'yMMMMd'}}</p>
<p>{{date | date:'shortTime'}}</p>