Skip to content

Commit adf2ee2

Browse files
corysmcyannbf
corysmc
authored and
yannbf
committed
adding modal navigation example
1 parent e8ebea1 commit adf2ee2

File tree

10 files changed

+130
-0
lines changed

10 files changed

+130
-0
lines changed

‎src/pages/popup-modal/modal-nav/modal-nav.html

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
<ion-nav [root]="modalPage" [(rootParams)]="modalParams" #content></ion-nav>

‎src/pages/popup-modal/modal-nav/modal-nav.module.ts

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
import { ModalNavPage } from './modal-nav';
2+
import { NgModule } from '@angular/core';
3+
import { IonicPageModule } from 'ionic-angular';
4+
5+
@NgModule({
6+
declarations: [
7+
ModalNavPage,
8+
],
9+
imports: [
10+
IonicPageModule.forChild(ModalNavPage),
11+
],
12+
exports: [
13+
ModalNavPage
14+
]
15+
})
16+
export class ModalNavPageModule {};

‎src/pages/popup-modal/modal-nav/modal-nav.scss

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
page-modal-nav {
2+
3+
}

‎src/pages/popup-modal/modal-nav/modal-nav.ts

Lines changed: 25 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,25 @@
1+
import { Component, ViewChild } from '@angular/core';
2+
import { IonicPage, Nav, NavParams, ViewController } from 'ionic-angular';
3+
4+
@IonicPage()
5+
@Component({
6+
selector: 'page-modal-nav',
7+
templateUrl: 'modal-nav.html',
8+
})
9+
export class ModalNavPage {
10+
modalPage: any = this.navParams.get('page');
11+
12+
modalParams: any = {
13+
}
14+
constructor(public navParams: NavParams,
15+
public viewCtrl: ViewController) {
16+
}
17+
18+
ionViewDidLoad() {
19+
console.log('ionViewDidLoad ModalNavPage');
20+
}
21+
dismissModal(data){
22+
this.viewCtrl.dismiss(data);
23+
}
24+
25+
}

‎src/pages/popup-modal/modal-nav/move-document/move-document.html

Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
<ion-header>
2+
<ion-navbar>
3+
<ion-title>{{thisFolder.name}}</ion-title>
4+
</ion-navbar>
5+
</ion-header>
6+
<ion-content padding>
7+
<ion-list>
8+
<ion-item *ngFor="let folder of folders" (click)="goToFolder(folder)">
9+
<ion-icon name="folder" item-start></ion-icon>
10+
<h2>{{folder.name}}</h2>
11+
</ion-item>
12+
</ion-list>
13+
</ion-content>
14+
<ion-footer padding>
15+
<ion-buttons end>
16+
<button ion-button color="primary" (click)="moveHere(thisFolder)">
17+
Move Here
18+
</button>
19+
</ion-buttons>
20+
</ion-footer>

‎src/pages/popup-modal/modal-nav/move-document/move-document.module.ts

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
import { NgModule } from '@angular/core';
2+
import { IonicPageModule } from 'ionic-angular';
3+
import { MoveDocumentPage } from './move-document';
4+
5+
@NgModule({
6+
declarations: [
7+
MoveDocumentPage,
8+
],
9+
imports: [
10+
IonicPageModule.forChild(MoveDocumentPage),
11+
],
12+
exports: [
13+
MoveDocumentPage
14+
]
15+
})
16+
export class MoveDocumentPageModule {}

‎src/pages/popup-modal/modal-nav/move-document/move-document.scss

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
page-move-document {
2+
3+
}

‎src/pages/popup-modal/modal-nav/move-document/move-document.ts

Lines changed: 37 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,37 @@
1+
import { Component } from '@angular/core';
2+
import { IonicPage, NavController, NavParams } from 'ionic-angular';
3+
import { ModalNavPage } from '../modal-nav';
4+
/**
5+
* Generated class for the MoveDocumentPage page.
6+
*
7+
* See http://ionicframework.com/docs/components/#navigation for more info
8+
* on Ionic pages and navigation.
9+
*/
10+
@IonicPage()
11+
@Component({
12+
selector: 'page-move-document',
13+
templateUrl: 'move-document.html',
14+
})
15+
export class MoveDocumentPage {
16+
17+
thisFolder: any = this.navParams.get('folder') || {
18+
name: 'Documents'
19+
}
20+
constructor(public navCtrl: NavController, public navParams: NavParams, public modalNavPage: ModalNavPage) {
21+
22+
}
23+
24+
ionViewDidLoad() {
25+
console.log('ionViewDidLoad MoveDocumentPage');
26+
}
27+
28+
folders:any = [{name: 'My Folder 1'}, {name: 'My Folder 2'}, {name: 'My Folder 3'}, {name: 'My Folder 4'}];
29+
30+
goToFolder(folder){
31+
this.navCtrl.push('MoveDocumentPage', { folder: folder });
32+
}
33+
moveHere(folder){
34+
this.modalNavPage.dismissModal(folder);
35+
36+
}
37+
}

‎src/pages/popup-modal/popup-modal.html

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -10,4 +10,5 @@
1010
<button ion-button block (click)="openHintModal()">Hint Modal</button>
1111
<button ion-button color="danger" block (click)="openSignupModal()">Signup with slider</button>
1212
<button ion-button color="secondary" block (click)="openWalkthroughModal()">Walkthrough modal</button>
13+
<button ion-button block (click)="openModalNav()">Modal with Navigation</button>
1314
</ion-content>

‎src/pages/popup-modal/popup-modal.ts

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
import { Component } from '@angular/core';
22
import { NavController, ModalController, IonicPage } from 'ionic-angular';
33

4+
45
@IonicPage()
56
@Component({
67
selector: 'page-popup-modal',
@@ -25,4 +26,11 @@ export class PopupModalsPage {
2526
let myModal = this.modalCtrl.create('SignupModalPage', null, { cssClass: 'inset-modal'});
2627
myModal.present();
2728
}
29+
openModalNav(){
30+
let myModal = this.modalCtrl.create('ModalNavPage', {page: 'MoveDocumentPage'});
31+
myModal.onDidDismiss(data => {
32+
console.log('move to folder', data);
33+
});
34+
myModal.present();
35+
}
2836
}

0 commit comments

Comments
 (0)