Angular2 + Typescript + Framework7 Demo Plunk

<!DOCTYPE html>
<html>

<head>
  <title>angular2 Framework 7 playground</title>

  <link rel="stylesheet" href="//framework7.io/dist/css/framework7.material.min.css" />

  <script src="https://code.angularjs.org/2.0.0-beta.14/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.14/Rx.js"></script>
  <script src="https://code.angularjs.org/2.0.0-beta.14/angular2.dev.js"></script>
  <script src="https://code.angularjs.org/2.0.0-beta.14/http.dev.js"></script>
  <script src="//framework7.io/dist/js/framework7.min.js"></script>
  <script>
    System.import('app')
      .catch(console.error.bind(console));
  </script>
</head>

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


</body>

</html>

/* Styles go here */

Angular 2 and Framework 7 
I decided to build some simple demo that targeting on Framework 7 and Angular 2 Integration.
Framework 7 is a mobile framework with native look and feel UX for Android and IOS.
Angular is a development platform for building mobile and desktop web applications.



My contacts:
http://www.en.softsolutions.co.il/
https://www.linkedin.com/in/djalik

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"
  },
  //packages defines our app package
  packages: {
    app: {
      main: './main.ts',
      defaultExtension: 'ts'
    }
  }
});

//main entry point
import {bootstrap} from 'angular2/platform/browser';
import {App} from './app';

bootstrap(App, [])
  .catch(err => console.error(err));

//our root app component
import {Component,AfterContentInit} from 'angular2/core';

import {
@Component({
  selector: 'my-app',
  providers: [],
  templateUrl: `src/app.component.html`,
  directives: []
})
export class App implements AfterContentInit {
  Framework7:myapp;
  items=['Sydney',
        'Albury',
        'Armidale',
        'Bathurst',
        'Broken Hill',
        'Cessnock',
        'Coffs Harbour',
        'Dubbo',
        'Gosford',
        'Goulburn',
        'Grafton',
        'Griffith',
        'Lake Macquarie',
        'Lismore',
        'Maitland',
        'Newcastle',
        'Nowra',
        'Orange',
        'Port Macquarie',
        'Queanbeyan',
        'Tamworth',
        'Tweed Heads',
        'Wagga Wagga',
        'Wollongong',
        'Wyong'];
  constructor()  {
    this.name = 'Angular2 + Framework7'
  }
   click(selected)
   {
      this.myApp.alert(selected, 'Custom Title!');
     
   }
   ngAfterContentInit() {
    // contentChild is updated after the content has been checked
    console.log('AfterContentInit: ');
    this.myApp = new Framework7({
    router: true,
    material: true
    // ... other parameters
});
  }
  
}

<div class="views">
  <div class="view view-main">
    <div class="pages navbar-fixed">
      <div data-page="home" class="page">
        <div class="navbar">
          <div class="navbar-inner">
            <div class="left"> </div>
            <div class="center sliding">{{name}}</div>
            <div class="right"> </div>
          </div>
        </div>
        <form data-search-list=".list-block-search" data-search-in=".item-title" class="searchbar searchbar-init">
          <div class="searchbar-input">
            <input type="search" placeholder="Search">
            <a href="#" class="searchbar-clear"></a>
          </div><a href="#" class="searchbar-cancel">Cancel</a>
        </form>
        <div class="searchbar-overlay"></div>
        <div class="page-content">
          <div class="content-block searchbar-not-found">
            <div class="content-block-inner">Nothing found</div>
          </div>
          <div class="list-block list-block-search searchbar-found">
            <ul>
              <li class="item-content" *ngFor="#item of items; #i = index" (click)="click(item)">
                <div class="item-inner">
                  <div class="item-title" >{{item}} </div>
                </div>
              </li>
           
            </ul>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

interface Framework7
{
    router: boolean;
    material: boolean;
}

declare var Framework7:Framework7;