<!DOCTYPE html>

  <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>



/* 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:
  //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 {
  selector: 'my-app',
  providers: [],
  templateUrl: `src/app.component.html`,
  directives: []
export class App implements AfterContentInit {
        'Broken Hill',
        'Coffs Harbour',
        'Lake Macquarie',
        'Port Macquarie',
        'Tweed Heads',
        'Wagga Wagga',
  constructor()  {
    this.name = 'Angular2 + Framework7'
      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>
        <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>
        <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 class="list-block list-block-search searchbar-found">
              <li class="item-content" *ngFor="#item of items; #i = index" (click)="click(item)">
                <div class="item-inner">
                  <div class="item-title" >{{item}} </div>
interface Framework7
    router: boolean;
    material: boolean;

declare var Framework7:Framework7;