chore(code): working on the conf app

packages/demos/conference-app/angular/package-lock.json

@@ -69,7 +69,7 @@
         "chalk": "2.2.2",
         "circular-dependency-plugin": "4.3.0",
         "common-tags": "1.6.0",
-        "copy-webpack-plugin": "4.3.0",
+        "copy-webpack-plugin": "4.3.1",
         "core-object": "3.1.5",
         "css-loader": "0.28.7",
         "cssnano": "3.10.0",
@@ -283,6 +283,42 @@
       "resolved": "https://registry.npmjs.org/@ionic-native/status-bar/-/status-bar-4.5.2.tgz",
       "integrity": "sha512-i2j2J9KIobCqyX6LlrlYhaHgd7qmP1pzHs4XAthHgth8m6c4gsHsh+Pl3fqknD7AX18ghpqo3tVtv0EFhSFU3w=="
     },
+    "@ionic/angular": {
+      "version": "0.0.2-12",
+      "resolved": "https://registry.npmjs.org/@ionic/angular/-/angular-0.0.2-12.tgz",
+      "integrity": "sha512-JagxmwuGf0FAUfRMLadZIy4MWa6NqlBiWJgy4GcSGhVFK6xw2LBFKxAXP+g0RvmFP2P0KXlCht/AS2c2L7liuA==",
+      "requires": {
+        "@stencil/core": "0.1.1-0"
+      },
+      "dependencies": {
+        "@stencil/core": {
+          "version": "0.1.1-0",
+          "resolved": "https://registry.npmjs.org/@stencil/core/-/core-0.1.1-0.tgz",
+          "integrity": "sha512-F4frvyNcIJoWO+ht2Hw8nT7TS7IN0/WKx4vGUbdKWnSvIN4/V+gO5pu/Um3MccSEDFnp+VYMKEZk99scF2wX2g==",
+          "requires": {
+            "chokidar": "1.7.0",
+            "jsdom": "11.3.0",
+            "node-sass": "4.5.3",
+            "rollup": "0.50.0",
+            "rollup-plugin-commonjs": "8.2.5",
+            "rollup-plugin-node-resolve": "3.0.0",
+            "typescript": "2.6.2",
+            "uglify-es": "3.1.6",
+            "workbox-build": "2.1.1"
+          }
+        },
+        "typescript": {
+          "version": "2.6.2",
+          "resolved": "https://registry.npmjs.org/typescript/-/typescript-2.6.2.tgz",
+          "integrity": "sha1-PFtv1/beCRQmkCfwPAlGdY92c6Q="
+        }
+      }
+    },
+    "@ionic/core": {
+      "version": "0.0.2-32",
+      "resolved": "https://registry.npmjs.org/@ionic/core/-/core-0.0.2-32.tgz",
+      "integrity": "sha512-43Y6nzBM3HqnitRMcuXlX51XjfVDgHdQJQTf6Ybp+VXxJ6CxV/9cQ28XrvtESa40QRfCLHV5MRNwUajy7F4xJw=="
+    },
     "@ionic/storage": {
       "version": "2.1.3",
       "resolved": "https://registry.npmjs.org/@ionic/storage/-/storage-2.1.3.tgz",
@@ -406,7 +442,8 @@
     "@types/node": {
       "version": "6.0.95",
       "resolved": "https://registry.npmjs.org/@types/node/-/node-6.0.95.tgz",
-      "integrity": "sha512-d1Twx1NM49dQ7jbNZfaHTQWuYL9cFVrGxYpbc3BvMf4626lOJOZnp2aJQNB9vP/WX3UOe1TrTUMABrGRu6FZhg=="
+      "integrity": "sha512-d1Twx1NM49dQ7jbNZfaHTQWuYL9cFVrGxYpbc3BvMf4626lOJOZnp2aJQNB9vP/WX3UOe1TrTUMABrGRu6FZhg==",
+      "dev": true
     },
     "@types/q": {
       "version": "0.0.32",
@@ -1665,9 +1702,9 @@
       }
     },
     "copy-webpack-plugin": {
-      "version": "4.3.0",
+      "version": "4.3.1",
-      "resolved": "https://registry.npmjs.org/copy-webpack-plugin/-/copy-webpack-plugin-4.3.0.tgz",
+      "resolved": "https://registry.npmjs.org/copy-webpack-plugin/-/copy-webpack-plugin-4.3.1.tgz",
-      "integrity": "sha512-5o1/xyWm8OYDmLFKAWMuPU3A/jZ4Z6kZSZGh36KD2XmtxnRa8lQyLx7bCNQm08BPaR/oqUdtJOr9jWfnYINp9g==",
+      "integrity": "sha512-xlcFiW/U7KrpS6dFuWq3r8Wb7koJx7QVc7LDFCosqkikaVSxkaYOnwDLwilbjrszZ0LYZXThDAJKcQCSrvdShQ==",
       "dev": true,
       "requires": {
         "cacache": "10.0.1",
@@ -6772,7 +6809,14 @@
       "resolved": "https://registry.npmjs.org/parse5/-/parse5-3.0.3.tgz",
       "integrity": "sha512-rgO9Zg5LLLkfJF9E6CCmXlSE4UVceloys8JrFqCcHloC3usd/kJCyPDwH2SOlzix2j3xaP9sUX3e8+kvkuleAA==",
       "requires": {
-        "@types/node": "6.0.95"
+        "@types/node": "8.5.2"
+      },
+      "dependencies": {
+        "@types/node": {
+          "version": "8.5.2",
+          "resolved": "https://registry.npmjs.org/@types/node/-/node-8.5.2.tgz",
+          "integrity": "sha512-KA4GKOpgXnrqEH2eCVhiv2CsxgXGQJgV1X0vsGlh+WCnxbeAE1GT44ZsTU1IN5dEeV/gDupKa7gWo08V5IxWVQ=="
+        }
       }
     },
     "parsejson": {

packages/demos/conference-app/angular/src/app/app.module.ts

@@ -1,16 +1,22 @@
 import { BrowserModule, } from '@angular/platform-browser';
 import { CUSTOM_ELEMENTS_SCHEMA, NgModule } from '@angular/core';
+import { HttpModule } from '@angular/http';
 
 import { IonicAngularModule } from '@ionic/angular';
 import { IonicStorageModule } from '@ionic/storage';
+import { InAppBrowser } from '@ionic-native/in-app-browser';
+import { SplashScreen } from '@ionic-native/splash-screen';
 
 import { AppComponent } from './app.component';
 
 import { AboutPage } from '../pages/about/about';
 import { PopoverPage } from '../pages/about-popover/about-popover';
 import { MapPage } from '../pages/map/map';
+import { SpeakerListPage } from '../pages/speaker-list/speaker-list';
 import { TabsPage } from '../pages/tabs-page/tabs-page';
 
+import { ConferenceData } from '../providers/conference-data';
+import { UserData } from '../providers/user-data';
 
 @NgModule({
   declarations: [
@@ -18,20 +24,28 @@ import { TabsPage } from '../pages/tabs-page/tabs-page';
     AppComponent,
     MapPage,
     PopoverPage,
+    SpeakerListPage,
     TabsPage
   ],
   entryComponents: [
     AboutPage,
     MapPage,
     PopoverPage,
+    SpeakerListPage,
     TabsPage
   ],
   imports: [
     BrowserModule,
+    HttpModule,
     IonicAngularModule.forRoot(),
     IonicStorageModule.forRoot()
   ],
-  providers: [],
+  providers: [
+    ConferenceData,
+    InAppBrowser,
+    SplashScreen,
+    UserData
+  ],
   bootstrap: [AppComponent],
   schemas: [
     CUSTOM_ELEMENTS_SCHEMA

packages/demos/conference-app/angular/src/assets/data/data.json

@@ -0,0 +1,345 @@
+{
+
+  "schedule": [{
+    "date": "2047-05-17",
+    "groups": [{
+      "time": "8:00 am",
+      "sessions": [{
+        "name": "Breakfast",
+        "timeStart": "8:00 am",
+        "timeEnd": "9:00 am",
+        "location": "Main hallway",
+        "tracks": ["Food"],
+        "id": "1"
+      }]
+    }, {
+      "time": "9:15 am",
+      "sessions": [{
+        "name": "Introduction to Appcamp.io",
+        "location": "Room 2203",
+        "description": "Mobile devices and browsers are now advanced enough that developers can build native-quality mobile apps using open web technologies like HTML5, Javascript, and CSS. In this talk, we’ll provide background on why and how we created Ionic, the design decisions made as we integrated Ionic with Angular, and the performance considerations for mobile platforms that our team had to overcome. We’ll also review new and upcoming Ionic features, and talk about the hidden powers and benefits of combining mobile app development and Angular.",
+        "speakerNames": ["Ellie Elephant"],
+        "timeStart": "9:15 am",
+        "timeEnd": "9:30 am",
+        "tracks": ["Ionic"],
+        "id": "2"
+      }, {
+        "name": "Getting started with Ionic",
+        "location": "Room 2202",
+        "description": "Mobile devices and browsers are now advanced enough that developers can build native-quality mobile apps using open web technologies like HTML5, Javascript, and CSS. In this talk, we’ll provide background on why and how we created Ionic, the design decisions made as we integrated Ionic with Angular, and the performance considerations for mobile platforms that our team had to overcome. We’ll also review new and upcoming Ionic features, and talk about the hidden powers and benefits of combining mobile app development and Angular.",
+        "speakerNames": ["Ted Turtle"],
+        "timeStart": "9:30 am",
+        "timeEnd": "9:45 am",
+        "tracks": ["Ionic"],
+        "id": "3"
+      }, {
+        "name": "Tooling for Ionic",
+        "location": "Room 2201",
+        "description": "Mobile devices and browsers are now advanced enough that developers can build native-quality mobile apps using open web technologies like HTML5, Javascript, and CSS. In this talk, we’ll provide background on why and how we created Ionic, the design decisions made as we integrated Ionic with Angular, and the performance considerations for mobile platforms that our team had to overcome. We’ll also review new and upcoming Ionic features, and talk about the hidden powers and benefits of combining mobile app development and Angular.",
+        "speakerNames": ["Rachel Rabbit"],
+        "timeStart": "9:45 am",
+        "timeEnd": "10:00 am",
+        "tracks": ["Tooling"],
+        "id": "4"
+      }]
+    }, {
+      "time": "10:00 am",
+      "sessions": [{
+        "name": "Migrating to Ionic2",
+        "location": "Room 2201",
+        "description": "Mobile devices and browsers are now advanced enough that developers can build native-quality mobile apps using open web technologies like HTML5, Javascript, and CSS. In this talk, we’ll provide background on why and how we created Ionic, the design decisions made as we integrated Ionic with Angular, and the performance considerations for mobile platforms that our team had to overcome. We’ll also review new and upcoming Ionic features, and talk about the hidden powers and benefits of combining mobile app development and Angular.",
+        "speakerNames": ["Eva Eagle", "Lionel Lion"],
+        "timeStart": "10:00 am",
+        "timeEnd": "10:15 am",
+        "tracks": ["Ionic"],
+        "id": "5"
+      }, {
+        "name": "Whats new in Angular",
+        "location": "Room 2203",
+        "description": "Mobile devices and browsers are now advanced enough that developers can build native-quality mobile apps using open web technologies like HTML5, Javascript, and CSS. In this talk, we’ll provide background on why and how we created Ionic, the design decisions made as we integrated Ionic with Angular, and the performance considerations for mobile platforms that our team had to overcome. We’ll also review new and upcoming Ionic features, and talk about the hidden powers and benefits of combining mobile app development and Angular.",
+        "speakerNames": ["Rachel Rabbit"],
+        "timeStart": "10:15 am",
+        "timeEnd": "10:30 am",
+        "tracks": ["Angular"],
+        "id": "6"
+      }, {
+        "name": "The evolution of Ionicons",
+        "location": "Room 2202",
+        "description": "Mobile devices and browsers are now advanced enough that developers can build native-quality mobile apps using open web technologies like HTML5, Javascript, and CSS. In this talk, we’ll provide background on why and how we created Ionic, the design decisions made as we integrated Ionic with Angular, and the performance considerations for mobile platforms that our team had to overcome. We’ll also review new and upcoming Ionic features, and talk about the hidden powers and benefits of combining mobile app development and Angular.",
+        "speakerNames": ["Isabella Iguana", "Eva Eagle"],
+        "timeStart": "10:15 am",
+        "timeEnd": "10:30 am",
+        "tracks": ["Design"],
+        "id": "7"
+      }, {
+        "name": "Ionic.io Services",
+        "location": "Room 2202",
+        "description": "Mobile devices and browsers are now advanced enough that developers can build native-quality mobile apps using open web technologies like HTML5, Javascript, and CSS. In this talk, we’ll provide background on why and how we created Ionic, the design decisions made as we integrated Ionic with Angular, and the performance considerations for mobile platforms that our team had to overcome. We’ll also review new and upcoming Ionic features, and talk about the hidden powers and benefits of combining mobile app development and Angular.",
+        "speakerNames": ["Charlie Cheetah"],
+        "timeStart": "10:45 am",
+        "timeEnd": "11:00 am",
+        "tracks": ["Services"],
+        "id": "8"
+      }]
+    }, {
+      "time": "11:00 am",
+      "sessions": [{
+        "name": "Ionic Workshop",
+        "location": "Room 2201",
+        "description": "Mobile devices and browsers are now advanced enough that developers can build native-quality mobile apps using open web technologies like HTML5, Javascript, and CSS. In this talk, we’ll provide background on why and how we created Ionic, the design decisions made as we integrated Ionic with Angular, and the performance considerations for mobile platforms that our team had to overcome. We’ll also review new and upcoming Ionic features, and talk about the hidden powers and benefits of combining mobile app development and Angular.",
+        "speakerNames": ["Karl Kitten", "Lionel Lion"],
+        "timeStart": "11:00 am",
+        "timeEnd": "11:45 am",
+        "tracks": ["Workshop"],
+        "id": "9"
+      }, {
+        "name": "Community Interaction",
+        "location": "Room 2203",
+        "description": "Mobile devices and browsers are now advanced enough that developers can build native-quality mobile apps using open web technologies like HTML5, Javascript, and CSS. In this talk, we’ll provide background on why and how we created Ionic, the design decisions made as we integrated Ionic with Angular, and the performance considerations for mobile platforms that our team had to overcome. We’ll also review new and upcoming Ionic features, and talk about the hidden powers and benefits of combining mobile app development and Angular.",
+        "speakerNames": ["Lionel Lion", "Gino Giraffe"],
+        "timeStart": "11:30 am",
+        "timeEnd": "11:50 am",
+        "tracks": ["Communication"],
+        "id": "10"
+      }, {
+        "name": "Navigation in Ionic",
+        "location": "Room 2203",
+        "description": "Mobile devices and browsers are now advanced enough that developers can build native-quality mobile apps using open web technologies like HTML5, Javascript, and CSS. In this talk, we’ll provide background on why and how we created Ionic, the design decisions made as we integrated Ionic with Angular, and the performance considerations for mobile platforms that our team had to overcome. We’ll also review new and upcoming Ionic features, and talk about the hidden powers and benefits of combining mobile app development and Angular.",
+        "speakerNames": ["Rachel Rabbit", "Eva Eagle"],
+        "timeStart": "11:30 am",
+        "timeEnd": "12:00 pm",
+        "tracks": ["Navigation"],
+        "id": "11"
+      }]
+    }, {
+      "time": "12:00 pm",
+      "sessions": [{
+        "name": "Lunch",
+        "location": "Auditorium",
+        "description": "Come grab lunch with all the Ionic fanatics and talk all things Ionic",
+        "timeStart": "12:00 pm",
+        "timeEnd": "1:00 pm",
+        "tracks": ["Food"],
+        "id": "12"
+      }]
+    }, {
+      "time": "1:00 pm",
+      "sessions": [{
+        "name": "Ionic in the Enterprise",
+        "location": "Room 2201",
+        "description": "Mobile devices and browsers are now advanced enough that developers can build native-quality mobile apps using open web technologies like HTML5, Javascript, and CSS. In this talk, we’ll provide background on why and how we created Ionic, the design decisions made as we integrated Ionic with Angular, and the performance considerations for mobile platforms that our team had to overcome. We’ll also review new and upcoming Ionic features, and talk about the hidden powers and benefits of combining mobile app development and Angular.",
+        "speakerNames": ["Paul Puppy"],
+        "timeStart": "1:00 pm",
+        "timeEnd": "1:15 pm",
+        "tracks": ["Communication"],
+        "id": "13"
+      }, {
+        "name": "Ionic Worldwide",
+        "location": "Room 2201",
+        "description": "Mobile devices and browsers are now advanced enough that developers can build native-quality mobile apps using open web technologies like HTML5, Javascript, and CSS. In this talk, we’ll provide background on why and how we created Ionic, the design decisions made as we integrated Ionic with Angular, and the performance considerations for mobile platforms that our team had to overcome. We’ll also review new and upcoming Ionic features, and talk about the hidden powers and benefits of combining mobile app development and Angular.",
+        "speakerNames": ["Gino Giraffe"],
+        "timeStart": "1:15 pm",
+        "timeEnd": "1:30 pm",
+        "tracks": ["Communication"],
+        "id": "14"
+      }, {
+        "name": "The Ionic package service",
+        "location": "Room 2203",
+        "description": "Mobile devices and browsers are now advanced enough that developers can build native-quality mobile apps using open web technologies like HTML5, Javascript, and CSS. In this talk, we’ll provide background on why and how we created Ionic, the design decisions made as we integrated Ionic with Angular, and the performance considerations for mobile platforms that our team had to overcome. We’ll also review new and upcoming Ionic features, and talk about the hidden powers and benefits of combining mobile app development and Angular.",
+        "speakerNames": ["Molly Mouse", "Burt Bear"],
+        "timeStart": "1:30 pm",
+        "timeEnd": "2:00 pm",
+        "tracks": ["Services"],
+        "id": "15"
+      }]
+    }, {
+      "time": "2:00 pm",
+      "sessions": [{
+        "name": "Push Notifications in Ionic",
+        "location": "Room 2202",
+        "description": "Mobile devices and browsers are now advanced enough that developers can build native-quality mobile apps using open web technologies like HTML5, Javascript, and CSS. In this talk, we’ll provide background on why and how we created Ionic, the design decisions made as we integrated Ionic with Angular, and the performance considerations for mobile platforms that our team had to overcome. We’ll also review new and upcoming Ionic features, and talk about the hidden powers and benefits of combining mobile app development and Angular.",
+        "speakerNames": ["Burt Bear", "Charlie Cheetah"],
+        "timeStart": "2:00 pm",
+        "timeEnd": "2:30 pm",
+        "tracks": ["Services"],
+        "id": "16"
+      }, {
+        "name": "Ionic Documentation",
+        "location": "Room 2202",
+        "description": "Mobile devices and browsers are now advanced enough that developers can build native-quality mobile apps using open web technologies like HTML5, Javascript, and CSS. In this talk, we’ll provide background on why and how we created Ionic, the design decisions made as we integrated Ionic with Angular, and the performance considerations for mobile platforms that our team had to overcome. We’ll also review new and upcoming Ionic features, and talk about the hidden powers and benefits of combining mobile app development and Angular.",
+        "speakerNames": ["Donald Duck"],
+        "timeStart": "2:30 pm",
+        "timeEnd": "2:45 pm",
+        "tracks": ["Documentation"],
+        "id": "17"
+      }, {
+        "name": "UX planning in Ionic",
+        "location": "Room 2203",
+        "description": "Mobile devices and browsers are now advanced enough that developers can build native-quality mobile apps using open web technologies like HTML5, Javascript, and CSS. In this talk, we’ll provide background on why and how we created Ionic, the design decisions made as we integrated Ionic with Angular, and the performance considerations for mobile platforms that our team had to overcome. We’ll also review new and upcoming Ionic features, and talk about the hidden powers and benefits of combining mobile app development and Angular.",
+        "speakerNames": ["Isabella Iguana", "Ellie Elephant"],
+        "timeStart": "2:45 pm",
+        "timeEnd": "3:00 pm",
+        "tracks": ["Design"],
+        "id": "18"
+      }]
+    }, {
+      "time": "3:00",
+      "sessions": [{
+        "name": "Directives in Ionic",
+        "location": "Room 2201",
+        "description": "Mobile devices and browsers are now advanced enough that developers can build native-quality mobile apps using open web technologies like HTML5, Javascript, and CSS. In this talk, we’ll provide background on why and how we created Ionic, the design decisions made as we integrated Ionic with Angular, and the performance considerations for mobile platforms that our team had to overcome. We’ll also review new and upcoming Ionic features, and talk about the hidden powers and benefits of combining mobile app development and Angular.",
+        "speakerNames": ["Ted Turtle"],
+        "timeStart": "3:00 pm",
+        "timeEnd": "3:30 pm",
+        "tracks": ["Angular"],
+        "id": "19"
+      }, {
+        "name": "Mobile States",
+        "location": "Room 2202",
+        "description": "Mobile devices and browsers are now advanced enough that developers can build native-quality mobile apps using open web technologies like HTML5, Javascript, and CSS. In this talk, we’ll provide background on why and how we created Ionic, the design decisions made as we integrated Ionic with Angular, and the performance considerations for mobile platforms that our team had to overcome. We’ll also review new and upcoming Ionic features, and talk about the hidden powers and benefits of combining mobile app development and Angular.",
+        "speakerNames": ["Rachel Rabbit"],
+        "timeStart": "3:30 pm",
+        "timeEnd": "3:45 pm",
+        "tracks": ["Navigation"],
+        "id": "20"
+      }]
+    }]
+  }],
+
+
+  "speakers": [{
+    "name": "Burt Bear",
+    "profilePic": "assets/img/speakers/bear.jpg",
+    "twitter": "ionicframework",
+    "about": "Burt is a Bear.",
+    "location": "Everywhere",
+    "email": "burt@example.com",
+    "phone": "+1-541-754-3010",
+    "id": "1"
+  }, {
+    "name": "Charlie Cheetah",
+    "profilePic": "assets/img/speakers/cheetah.jpg",
+    "twitter": "ionicframework",
+    "about": "Charlie is a Cheetah.",
+    "location": "Everywhere",
+    "email": "charlie@example.com",
+    "phone": "+1-541-754-3010",
+    "id": "2"
+  }, {
+    "name": "Donald Duck",
+    "profilePic": "assets/img/speakers/duck.jpg",
+    "twitter": "ionicframework",
+    "about": "Donald is a Duck.",
+    "location": "Everywhere",
+    "email": "donald@example.com",
+    "phone": "+1-541-754-3010",
+    "id": "3"
+  }, {
+    "name": "Eva Eagle",
+    "profilePic": "assets/img/speakers/eagle.jpg",
+    "twitter": "ionicframework",
+    "about": "Eva is an Eagle.",
+    "location": "Everywhere",
+    "email": "eva@example.com",
+    "phone": "+1-541-754-3010",
+    "id": "4"
+  }, {
+    "name": "Ellie Elephant",
+    "profilePic": "assets/img/speakers/elephant.jpg",
+    "twitter": "ionicframework",
+    "about": "Ellie is an Elephant.",
+    "location": "Everywhere",
+    "email": "ellie@example.com",
+    "phone": "+1-541-754-3010",
+    "id": "5"
+  }, {
+    "name": "Gino Giraffe",
+    "profilePic": "assets/img/speakers/giraffe.jpg",
+    "twitter": "ionicframework",
+    "about": "Gino is a Giraffe.",
+    "location": "Everywhere",
+    "email": "gino@example.com",
+    "phone": "+1-541-754-3010",
+    "id": "6"
+  }, {
+    "name": "Isabella Iguana",
+    "profilePic": "assets/img/speakers/iguana.jpg",
+    "twitter": "ionicframework",
+    "about": "Isabella is an Iguana.",
+    "location": "Everywhere",
+    "email": "isabella@example.com",
+    "phone": "+1-541-754-3010",
+    "id": "7"
+  }, {
+    "name": "Karl Kitten",
+    "profilePic": "assets/img/speakers/kitten.jpg",
+    "twitter": "ionicframework",
+    "about": "Karl is a Kitten.",
+    "location": "Everywhere",
+    "email": "karl@example.com",
+    "phone": "+1-541-754-3010",
+    "id": "8"
+  }, {
+    "name": "Lionel Lion",
+    "profilePic": "assets/img/speakers/lion.jpg",
+    "twitter": "ionicframework",
+    "about": "Lionel is a Lion.",
+    "location": "Everywhere",
+    "email": "lionel@example.com",
+    "phone": "+1-541-754-3010",
+    "id": "9"
+  }, {
+    "name": "Molly Mouse",
+    "profilePic": "assets/img/speakers/mouse.jpg",
+    "twitter": "ionicframework",
+    "about": "Molly is a Mouse.",
+    "location": "Everywhere",
+    "email": "molly@example.com",
+    "phone": "+1-541-754-3010",
+    "id": "10"
+  }, {
+    "name": "Paul Puppy",
+    "profilePic": "assets/img/speakers/puppy.jpg",
+    "twitter": "ionicframework",
+    "about": "Paul is a Puppy.",
+    "location": "Everywhere",
+    "email": "paul@example.com",
+    "phone": "+1-541-754-3010",
+    "id": "11"
+  }, {
+    "name": "Rachel Rabbit",
+    "profilePic": "assets/img/speakers/rabbit.jpg",
+    "twitter": "ionicframework",
+    "about": "Rachel is a Rabbit.",
+    "location": "Everywhere",
+    "email": "rachel@example.com",
+    "phone": "+1-541-754-3010",
+    "id": "12"
+  }, {
+    "name": "Ted Turtle",
+    "profilePic": "assets/img/speakers/turtle.jpg",
+    "twitter": "ionicframework",
+    "about": "Ted is a Turtle.",
+    "location": "Everywhere",
+    "email": "ted@example.com",
+    "phone": "+1-541-754-3010",
+    "id": "13"
+  }],
+
+
+  "map": [{
+    "name": "Monona Terrace Convention Center",
+    "lat": 43.071584,
+    "lng": -89.380120,
+    "center": true
+  }, {
+    "name": "Ionic HQ",
+    "lat": 43.074395,
+    "lng": -89.381056
+  }, {
+    "name": "Afterparty - Brocach Irish Pub",
+    "lat": 43.07336,
+    "lng": -89.38335
+  }]
+
+}

packages/demos/conference-app/angular/src/assets/img/appicon.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="512" height="512"><style type="text/css"><![CDATA[
+	.st0{fill:#4E8EF7;}
+]]></style><path d="M434.6 121.3c4.5-5.4 7.2-12.4 7.2-20 0-17.3-14-31.3-31.3-31.3-7.6 0-14.5 2.7-20 7.2C353 48.8 306.3 32 255.8 32c-123.5 0-224 100.5-224 224s100.5 224 224 224 224-100.5 224-224c0-50.6-16.8-97.2-45.2-134.7zM255.8 471c-118.6 0-215-96.5-215-215 0-118.6 96.5-215 215-215 48.2 0 92.8 16 128.7 42.8-3.4 5-5.3 11-5.3 17.5 0 17.3 14 31.3 31.3 31.3 6.5 0 12.5-2 17.5-5.3 26.9 35.9 42.8 80.5 42.8 128.7 0 118.5-96.5 215-215 215z" class="st0"/><ellipse cx="255.8" cy="256" class="st0" rx="96.2" ry="96.1"/></svg>

packages/demos/conference-app/angular/src/assets/img/ionic-logo-white.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="512" height="177.846" viewBox="0 167.078 512 177.846" enable-background="new 0 167.078 512 177.846"><g fill="#fff"><path d="M227.8 233.12h3.67v69.6h-3.68zM283.73 231.4c-20.88 0-36.63 15.77-36.63 36.52 0 20.88 15.75 36.5 36.63 36.5 20.88 0 36.64-15.62 36.64-36.5 0-20.75-15.76-36.5-36.64-36.5zm0 69.6c-18.78 0-32.96-14.17-32.96-33.08 0-18.9 14.18-33.1 32.96-33.1s32.96 14.2 32.96 33.1c0 18.9-14.2 33.1-32.97 33.1zM389.83 238.37c-7.88-6.43-17.33-6.96-22.2-6.96-11.02 0-23.23 5.13-27.56 15.1h-.27v-13.38h-3.68v69.6h3.68v-40.06c0-17.46 10.77-27.83 28.23-27.83 10.5 0 16.15 3.4 19.7 6.56 5.25 4.72 8.53 12.47 8.53 24.55v36.77h3.68v-36.77c0-12.48-3.28-21.8-10.1-27.58zM420.3 233.12h3.67v69.6h-3.68zM476.23 301c-17.73 0-32.96-13.4-32.96-33.08 0-9.46 3.94-18.65 9.6-23.77 7.2-6.44 13.64-9.32 23.5-9.32 13.65 0 25.73 7.6 30.46 20.87h4.07c-5.52-16.4-20.5-24.3-34.67-24.3-21.14 0-36.64 16.03-36.64 36.65 0 21.67 16.4 36.37 36.63 36.37 16.55 0 29.68-9.45 34.54-23.63h-4.07c-3.42 10.36-14.7 20.2-30.47 20.2z"/><circle cx="229.632" cy="211.546" r="3.969"/><circle cx="422.132" cy="211.546" r="3.969"/><circle cx="90.024" cy="256" r="36.306"/><path d="M164.12 194.4c0-6.9-5.6-12.5-12.5-12.5-3.12 0-5.97 1.17-8.16 3.07-14.9-11.23-33.4-17.9-53.44-17.9C41 167.08 1.1 206.98 1.1 256c0 49.03 39.9 88.92 88.92 88.92 49.04 0 88.93-39.9 88.93-88.92 0-20.04-6.67-38.55-17.9-53.43 1.9-2.2 3.06-5.05 3.06-8.17zm-74.1 147.53C42.64 341.93 4.1 303.38 4.1 256S42.63 170.07 90 170.07c19.27 0 37.07 6.37 51.42 17.12-1.44 2.03-2.3 4.5-2.3 7.2 0 6.9 5.6 12.48 12.5 12.48 2.67 0 5.15-.86 7.2-2.3 10.74 14.35 17.1 32.15 17.1 51.42 0 47.38-38.53 85.93-85.92 85.93z"/></g></svg>

packages/demos/conference-app/angular/src/pages/about/about.html

@@ -1,13 +1,13 @@
 <ion-header>
   <ion-toolbar>
-    <button ion-button menuToggle>
+    <ion-button menuToggle>
       <ion-icon name="menu"></ion-icon>
-    </button>
+    </ion-button>
     <ion-title>About</ion-title>
     <ion-buttons end>
-      <button ion-button icon-only (click)="presentPopover($event)">
+      <ion-button icon-only (click)="presentPopover($event)">
         <ion-icon name="more"></ion-icon>
-      </button>
+      </ion-button>
     </ion-buttons>
   </ion-toolbar>
 </ion-header>

packages/demos/conference-app/angular/src/pages/about/about.scss

@@ -19,7 +19,7 @@
 }
 
 .about-info ion-icon {
-  color: color($colors, primary);
+  // color: color($colors, primary);
   width: 20px;
 }
 

packages/demos/conference-app/angular/src/pages/about/about.ts

@@ -14,7 +14,10 @@ export class AboutPage {
   constructor(public popoverCtrl: PopoverController) { }
 
   presentPopover(event: Event) {
-    const popover = this.popoverCtrl.create(PopoverPage);
+    const popover = this.popoverCtrl.create({
-    popover.present({ ev: event });
+      component: PopoverPage,
+      ev: event
+    });
+    popover.present();
   }
 }

packages/demos/conference-app/angular/src/pages/speaker-detail/speaker-detail.html

@@ -0,0 +1,23 @@
+<ion-header>
+  <ion-navbar>
+    <ion-title>{{speaker?.name}}</ion-title>
+  </ion-navbar>
+</ion-header>
+
+<ion-content padding class="speaker-detail">
+  <div text-center *ngIf="speaker">
+    <img [src]="speaker.profilePic" [alt]="speaker.name"><br>
+
+    <ion-button icon-only clear small color="twitter">
+      <ion-icon name="logo-twitter"></ion-icon>
+    </ion-button>
+    <ion-button ion-button icon-only clear small color="github">
+      <ion-icon name="logo-github"></ion-icon>
+    </ion-button>
+    <ion-button ion-button icon-only clear small color="instagram">
+      <ion-icon name="logo-instagram"></ion-icon>
+    </ion-button>
+  </div>
+
+  <p>{{speaker?.about}}</p>
+</ion-content>

packages/demos/conference-app/angular/src/pages/speaker-detail/speaker-detail.scss

@@ -0,0 +1,9 @@
+
+.speaker-detail img {
+  max-width: 140px;
+  border-radius: 50%;
+}
+
+.speaker-detail p {
+  color: #60646B;
+}

packages/demos/conference-app/angular/src/pages/speaker-detail/speaker-detail.ts

@@ -0,0 +1,33 @@
+import { Component } from '@angular/core';
+import { NavController, NavParams } from '@ionic/angular';
+
+import { ConferenceData } from '../../providers/conference-data';
+
+@Component({
+  selector: 'page-speaker-detail',
+  templateUrl: 'speaker-detail.html'
+})
+export class SpeakerDetailPage {
+  speaker: any;
+
+  constructor(public dataProvider: ConferenceData, public navCtrl: NavController, public navParams: NavParams) {
+  }
+
+  ionViewWillEnter() {
+    this.dataProvider.load().subscribe((data: any) => {
+      if (data && data.speakers) {
+        for (const speaker of data.speakers) {
+          if (speaker && speaker.id === this.navParams.data.speakerId) {
+            this.speaker = speaker;
+            break;
+          }
+        }
+      }
+    });
+
+  }
+
+  goToSessionDetail(session: any) {
+    this.navCtrl.push('SessionDetailPage', { sessionId: session.id });
+  }
+}

packages/demos/conference-app/angular/src/pages/speaker-list/speaker-list.html

@@ -0,0 +1,66 @@
+<ion-header>
+  <ion-toolbar>
+    <ion-button menuToggle>
+      <ion-icon name="menu"></ion-icon>
+    </ion-button>
+    <ion-title>Speakers</ion-title>
+  </ion-toolbar>
+</ion-header>
+
+<ion-content class="outer-content speaker-list">
+  <ion-list>
+    <ion-grid fixed>
+      <ion-row align-items-stretch>
+
+        <ion-col col-12 col-md-6 align-self-stretch align-self-center *virtualItem="let speaker" approxItemHeight="457px">
+
+          <ion-card class="speaker-card">
+            <ion-card-header>
+              <ion-button ion-item detail-none (click)="goToSpeakerDetail(speaker)">
+                <ion-avatar item-start>
+                  <img [src]="speaker.profilePic" alt="Speaker profile pic">
+                </ion-avatar>
+                {{speaker.name}}
+              </ion-button>
+            </ion-card-header>
+
+            <ion-card-content class="outer-content">
+              <ion-list>
+                <ion-button ion-item *ngFor="let session of speaker.sessions" (click)="goToSessionDetail(session)">
+                  <h3>{{session.name}}</h3>
+                </ion-button>
+
+                <ion-button ion-item (click)="goToSpeakerDetail(speaker)">
+                  <h3>About {{speaker.name}}</h3>
+                </ion-button>
+              </ion-list>
+            </ion-card-content>
+
+            <ion-row no-padding>
+              <ion-col col-12 col-lg-auto text-center text-lg-left>
+                <ion-button clear small color="primary" icon-start (click)="goToSpeakerTwitter(speaker)">
+                  <ion-icon name="logo-twitter"></ion-icon>
+                  Tweet
+                </ion-button>
+              </ion-col>
+              <ion-col col-12 col-lg-auto text-center>
+                <ion-button clear small color="primary" icon-start (click)="openSpeakerShare(speaker)">
+                  <ion-icon name='share-alt'></ion-icon>
+                  Share
+                </ion-button>
+              </ion-col>
+              <ion-col col-12 col-lg-auto text-center text-lg-right>
+                <ion-button clear small color="primary" icon-start (click)="openContact(speaker)">
+                  <ion-icon name='chatboxes'></ion-icon>
+                  Contact
+                </ion-button>
+              </ion-col>
+            </ion-row>
+
+          </ion-card>
+
+        </ion-col>
+      </ion-row>
+    </ion-grid>
+  </ion-list>
+</ion-content>

packages/demos/conference-app/angular/src/pages/speaker-list/speaker-list.scss

@@ -0,0 +1,31 @@
+page-speaker-list {
+  .scroll-content {
+    background: #EDEDED;
+  }
+
+  .speaker-card {
+    height: 100%;
+    display: flex;
+    flex-direction: column;
+
+    ion-card-content {
+      flex: 1 1 auto;
+    }
+  }
+
+  // Todo: remove when this issue https://github.com/ionic-team/ionic/issues/11212 is fixed
+  @media(min-width: 769px) {
+    .speaker-card {
+      height: 370px;
+    }
+  }
+
+  .speaker-card ion-card-header .item {
+    padding: 4px 16px;
+  }
+
+  .speaker-card ion-card-content {
+    padding-left: 0;
+    padding-right: 0;
+  }
+}

packages/demos/conference-app/angular/src/pages/speaker-list/speaker-list.ts

@@ -0,0 +1,104 @@
+import { Component } from '@angular/core';
+
+import {
+  ActionSheetController,
+  NavController
+} from '@ionic/angular';
+
+
+import { InAppBrowser } from '@ionic-native/in-app-browser';
+
+import { ConferenceData } from '../../providers/conference-data';
+
+// import { SessionDetailPage } from '../session-detail/session-detail';
+import { SpeakerDetailPage } from '../speaker-detail/speaker-detail';
+
+@Component({
+  selector: 'page-speaker-list',
+  templateUrl: 'speaker-list.html'
+})
+export class SpeakerListPage {
+  speakers: any[] = [];
+
+  constructor(
+    public actionSheetCtrl: ActionSheetController,
+    public navCtrl: NavController,
+    public confData: ConferenceData,
+    public inAppBrowser: InAppBrowser
+  ) {}
+
+  ionViewDidLoad() {
+    this.confData.getSpeakers().subscribe((speakers: any[]) => {
+      this.speakers = speakers;
+    });
+  }
+
+  goToSessionDetail(session: any) {
+    // this.navCtrl.push(SessionDetailPage, { sessionId: session.id });
+  }
+
+  goToSpeakerDetail(speaker: any) {
+    // this.navCtrl.push(SpeakerDetailPage, { speakerId: speaker.id });
+  }
+
+  goToSpeakerTwitter(speaker: any) {
+    this.inAppBrowser.create(
+      `https://twitter.com/${speaker.twitter}`,
+      '_blank'
+    );
+  }
+
+  openSpeakerShare(speaker: any) {
+    const actionSheet = this.actionSheetCtrl.create({
+      title: 'Share ' + speaker.name,
+      buttons: [
+        {
+          text: 'Copy Link',
+          handler: () => {
+            console.log('Copy link clicked on https://twitter.com/' + speaker.twitter);
+            if ( (window as any)['cordova'] && (window as any)['cordova'].plugins.clipboard) {
+              (window as any)['cordova'].plugins.clipboard.copy(
+                'https://twitter.com/' + speaker.twitter
+              );
+            }
+          }
+        },
+        {
+          text: 'Share via ...'
+        },
+        {
+          text: 'Cancel',
+          role: 'cancel'
+        }
+      ]
+    });
+
+    actionSheet.present();
+  }
+
+  openContact(speaker: any) {
+    const mode = 'ios'; // this.config.get('mode');
+
+    const actionSheet = this.actionSheetCtrl.create({
+      title: 'Contact ' + speaker.name,
+      buttons: [
+        {
+          text: `Email ( ${speaker.email} )`,
+          icon: mode !== 'ios' ? 'mail' : null,
+          handler: () => {
+            window.open('mailto:' + speaker.email);
+          }
+        },
+        {
+          text: `Call ( ${speaker.phone} )`,
+          icon: mode !== 'ios' ? 'call' : null,
+          handler: () => {
+            window.open('tel:' + speaker.phone);
+          }
+        }
+      ]
+    });
+
+    actionSheet.present();
+  }
+}

packages/demos/conference-app/angular/src/pages/tabs-page/tabs-page.ts

@@ -3,7 +3,7 @@ import { Component } from '@angular/core';
 import { AboutPage } from '../about/about';
 import { MapPage } from '../map/map';
 // import { SchedulePage } from '../schedule/schedule';
-// import { SpeakerListPage } from '../speaker-list/speaker-list';
+import { SpeakerListPage } from '../speaker-list/speaker-list';
 
 @Component({
   templateUrl: 'tabs-page.html'
@@ -11,7 +11,7 @@ import { MapPage } from '../map/map';
 export class TabsPage {
   // set the root pages for each tab
   tab1Root: any = AboutPage;
-  tab2Root: any = AboutPage;
+  tab2Root: any = SpeakerListPage;
   tab3Root: any = MapPage;
   tab4Root: any = AboutPage;
   mySelectedIndex: number;