Question

app/app.core.scss

@@ -11,4 +11,4 @@
 
 @import "pages/grid/grid";
 
-@import "pages/list/list";
+@import "pages/questions/questions";

app/app.ts

@@ -1,7 +1,7 @@
 import {App, IonicApp, Platform} from 'ionic-framework/ionic';
 
 import {TeamPage} from './pages/team/team';
-import {ListPage} from './pages/list/list';
+import {QuestionsPage} from './pages/questions/questions';
 import {GridPage} from './pages/grid/grid';
 
 
@@ -18,7 +18,7 @@ class MyApp {
     // used for an example of ngFor and navigation
     this.pages = [
       { title: 'Team', component: TeamPage },
-      { title: 'Questions', component: ListPage },
+      { title: 'Questions', component: QuestionsPage },
       { title: 'Account', component: GridPage },
     ];
 

app/pages/questions/questionadd.html

@@ -0,0 +1,16 @@
+<!-- Modal template appears when you actually load up the modal -->
+
+<ion-navbar *navbar>
+  <button menuToggle>
+    <icon menu></icon>
+  </button>
+  <ion-title>Add a Question</ion-title>
+</ion-navbar>
+
+<ion-content>
+<h2>I am a modal!</h2>
+
+<!-- Closing the modal does not require calling a function in your code anymore -->
+<button (click)="close()">Close</button>
+
+</ion-content>

app/pages/questions/questions.html

@@ -0,0 +1,35 @@
+<ion-navbar *navbar>
+  <button menuToggle>
+    <icon menu></icon>
+  </button>
+  <ion-title>Questions</ion-title>
+</ion-navbar>
+
+<ion-content>
+<!-- Placeholder thumbnail list stuff -->
+  <ion-list>
+    <ion-list-header>Today</ion-list-header>
+
+      <ion-item (click)="itemTapped('selectedItem')">
+        <ion-thumbnail item-left>
+          <img src="http://placehold.it/150x150">
+        </ion-thumbnail>
+        <h2>Name 1</h2>
+        <H3>Angular 2 question</H3>
+        <p>Please teach me how to properly...</p>
+      </ion-item>
+
+      <ion-item (click)="itemTapped('selectedItem2')">
+        <ion-thumbnail item-left>
+          <img src="http://placehold.it/150x150">
+        </ion-thumbnail>
+        <h2>Name 2</h2>
+        <H3>Javascript question</H3>
+        <p>What's a good way to start up a...</p>
+      </ion-item>
+
+   </ion-list>
+
+   <!-- Opens modal, the openModal is a function -->
+  <button fab fab-right (click)="openModal()"><icon add></icon></button>
+</ion-content>

app/pages/questions/questions.ts

@@ -0,0 +1,37 @@
+import {IonicApp, Page, NavController, NavParams, Modal, Platform} from 'ionic-framework/ionic';
+import {QuestionsDetail} from './questionsdetail';
+
+@Page({
+  templateUrl: 'build/pages/questions/questions.html'
+})
+export class QuestionsPage {
+
+  constructor(app: IonicApp, nav: NavController, navParams: NavParams, modal: Modal) {
+    this.nav = nav;
+    this.modal = modal;
+  }
+
+  //once clicked, opens up the new screen, take note of the QuestionsDetail
+  itemTapped(item) {
+    this.nav.push(QuestionsDetail)
+    console.log("switch screen");
+  }
+
+  //opens the modal, placed here because we are still in the questions page
+  openModal(item){
+    this.modal.open(questionModal);
+    console.log("Open Modal");
+  }
+
+}
+
+
+//Modal code, the templateUrl directs to the modal template
+@Page({
+  templateUrl: 'build/pages/questions/questionadd.html'
+})
+class questionModal{
+
+  constructor() {
+  }
+}

app/pages/questions/questionsdetail.html

@@ -0,0 +1,10 @@
+<ion-navbar *navbar>
+  <button menuToggle>
+    <icon menu></icon>
+  </button>
+  <ion-title>Questions Detail</ion-title>
+</ion-navbar>
+
+<ion-content>
+Hello world
+</ion-content>

app/pages/questions/questionsdetail.ts

@@ -0,0 +1,12 @@
+import {IonicApp, Page, NavController, NavParams} from 'ionic-framework/ionic';
+
+
+@Page({
+  templateUrl: 'build/pages/questions/questionsdetail.html'
+})
+export class QuestionsDetail {
+  constructor(app: IonicApp, nav: NavController, navParams: NavParams) {
+
+  }
+
+}