I am creating an Ionic application where I am using tabs. I want to be able to navigate from one tab to the other using the typescript component class attached to the tab template. For example, Tab 2 should be activated upon triggering an event in tab 1.
My tab loads well in the tabs and all is well as long as I manually click on the tab to move around, but trying to switch context in the code behind as been very tricky.
At load time I am able to make any one of the tabs active by simply setting the [selectedIndex] attribute of the ion-tabs to the value of an attribute in my tabs component class.
Tabs Parent Template - tab.html
<ion-tabs #tabParent [selectedIndex]="tabToShow">
<ion-tab tabTitle="Tab 1" [root]="tab2" [rootParams]="{parent : tabParent}"></ion-tab>
<ion-tab tabTitle="Tab 2" [root]="tab2" [rootParams]="{parent : tabParent}></ion-tab>
<ion-tab tabTitle="Tab 3" [root]="tab3" [rootParams]="{parent : tabParent}></ion-tab>
</ion-tabs>
Component - tab.ts
import {Page} from 'ionic-angular';
import {Tab1} from '../tab1/tab1.ts';
import {Tab2} from '../tab2/tab2.ts';
import {Tab3} from '../tab3/tab3.ts';
#Page({
templateUrl : 'build/pages/tab/tab.html'
})
export class Tab{
tab1: any;
tab2: any;
tab3: any;
tabToShow : number = 1;
ngOnInit(){
this.tab1 = Tab1;
this.tab2 = Tab2;
this.tab3 = Tab3;
}
}
In the component for the first tab (Tab1), i am able to get a reference to the parent tabs by using [rootParams] = "{parent : tabParent}" and I am able access all available properties exposed by the tabs object. An event generated on the tab1.html template, causes the goToTab2() to be called. So, I was able to set SelectedIndex to 1 (which I expect to change the active tab to the second tab). But the tab is not changing.
tab1.ts
import {Page, NavParams} from 'ionic-angular';
import {Tab2} from '../tab/tab2/tab2.ts'
#Page({
templateUrl : 'build/pages/tab/tab1/tab1.html'
})
export class Tab1{
parent : any;
constructor(nav : NavParams){
this.parent = nav.data;
}
goToTab2(event, value): void{
this.parent.parent.selectedIndex = 1;
console.log(this.parent.parent);
}
}
I need help, what am I doing wrong?
I had the same problem and after hours of trying and debugging, it turned out to be so simple:
import {Page, NavController, Tabs} from 'ionic-angular';
#Page({
templateUrl : 'build/pages/tab/tab1/tab1.html'
})
export class Tab1{
constructor(private nav: NavController) {
};
selectTab(index: number) {
var t: Tabs = this.nav.parent;
t.select(index);
}
}
this.nav.parent.select(tabIndex);
tabIndex starts from 0
I wanted to navigate to tabbed pages from a side menu. To enable that I did the following:
Tabs.html:
<ion-tabs selectedIndex="{{activeTab}}">
<ion-tab [root]="tab1Root" tabTitle="Home" tabIcon="home"></ion-tab>
<ion-tab [root]="tab2Root" tabTitle="Profiles" tabIcon="filing"> </ion-tab>
</ion-tabs>
Tabs.ts
...normal stuff preceding ...
export class TabsPage {
#ViewChild('page-tabs') tabRef: Tabs;
activeTab: any;
tab1Root: any = HomePage;
tab2Root: any = ProfilesPage;
constructor(public navCtrl: NavController, public params: NavParams) {
this.authUser = params.get("authUser");
this.activeTab = params.get("tab")?params.get("tab"):0;
}
}
Then I just passed the tab parameter from app.component.ts
...normal stuff preceding ...
export class MyApp {
#ViewChild(Nav) nav: Nav;
isAppInitialized: boolean = false;
rootPage: any
pages: Array<{title: string, type: string, index?: number, component?: any}>;
constructor(
private platform: Platform,
public menu: MenuController) {
}
ngOnInit() {
this.platform.ready().then(() => {
this.pages = [
{title: 'Home', type: 'tab', index: 0},
{title: 'Profiles', type: 'tab', index:1},
{title: 'Create Shares', type: 'page', component: HomePage},
{title: 'Existing Shares',type: 'page', component: ProfilesPage}
];
});
}
openPage(page) {
this.menu.close();
if (page.type==='tab') {
this.nav.setRoot(TabsPage,{tab: page.index});
} else {
this.nav.setRoot(page.componenet);
}
}
}
Then in app.html
<ion-header>
<ion-toolbar>
<ion-title>Left Menu</ion-title>
<button class="absolute-right" ion-button clear menuClose="left">
<span ion-text showWhen="ios">Close</span>
<ion-icon name="md-close" showWhen="android,windows"></ion-icon>
</button>
</ion-toolbar>
</ion-header>
<ion-content>
<ion-list>
<button ion-item *ngFor="let p of pages" (click)="openPage(p)">
{{p.title}}
</button>
</ion-list>
</ion-content>
</ion-menu>
There you have it...
For Ionic 3+, you don't have access to this.nav, so you can use a function such as:
go(tabIndex: number)
{
this.app.getActiveNavs()[0].parent.select(tabIndex);
}
If the function is defined in a common class (imported in all your pages), you can then call it wherever you want:
<button ion-button (click)="core.go(0);">Go to first tab (#0)</button>
<button ion-button (click)="core.go(1);">Go to second tab (#1)</button>
Even easier now! You can add the selectedIndex attribute to
<ion-tabs selectedIndex="2">
<ion-tab [root]="tab1Root"></ion-tab>
<ion-tab [root]="tab2Root"></ion-tab>
<ion-tab [root]="tab3Root"></ion-tab>
</ion-tabs>
export class Page1 {
tab:Tabs;
// create a class variable to store the reference of the tabs
constructor(public navCtrl: NavController, private nav: Nav) {
this.tab = this.navCtrl.parent;
/*Since Tabs are declarative component of the NavController
- it is accessible from within a child component.
this.tab - actually stores an array of all the tabs defined
in the tab.html / tab component.
*/
}
goToTab2 (){
this.tab.select(1);
// the above line is self explanatory. We are just calling the select() method of the tab
}
goToTab3 (){
this.tab.select(2);
}
}
In your tab1 component (tab1.ts),try to inject the parent component Tab :
export class Tab1{
constructor(#Host() _parent:Tab) {}
goToTab2(event, value): void{
this._parent.tabToShow = 1 ;
}
}
You can get tabs element by using #ViewChild or IonicApp.getComponent().
The tab-button can be accessed by going through tabs element.
The tab-button click event is bound to onClick function by using #HostListener.
You can switch tab by calling the tab-button onClick button.
export class TabsPage {
tab1TabRoot: Type = Tab1Page;
tab2TabRoot: Type = Tab2Page;
tab3TabRoot: Type = Tab3Page
#ViewChild(Tabs) tabs;
constructor(
private _ngZone: NgZone,
private _platform: Platform,
private _app: IonicApp,
) {
}
ngOnInit() {
}
ngAfterViewInit() {
console.log(this.tabs);
}
public selectTab2() {
this._ngZone.run(function() {
tabs._btns._results[0].onClick();
});
}
}
Its simple just use NavController class and its property .parent.select(position of tab you want)
constructor(public navCtrl: NavController) {
}
goToTab2(){
this.navCtrl.parent.select(1);
}
Related
I am very new to ionic and angular.
Anyway, I am trying to following an tutorial to create a notes app using ionic4 https://www.joshmorony.com/building-a-notepad-application-from-scratch-with-ionic/.
So, I follow the instruction. Everything is ok except that the view doesn't updated when I add new note. The code is as follow:
Note services:
import { Injectable } from '#angular/core';
import { Storage } from '#ionic/storage';
import { Note } from '../interfaces/note';
#Injectable({
providedIn: 'root'
})
export class NotesService {
public notes: Note[] = [];
public loaded: boolean = false;
constructor(private storage: Storage) {
}
load(): Promise<boolean> {
// Return a promise so that we know when this operation has completed
return new Promise((resolve) => {
// Get the notes that were saved into storage
this.storage.get('notes').then((notes) => {
// Only set this.notes to the returned value if there were values stored
if (notes != null) {
this.notes = notes;
}
// This allows us to check if the data has been loaded in or not
this.loaded = true;
resolve(true);
});
});
}
save(): void {
// Save the current array of notes to storage
this.storage.set('notes', this.notes);
}
getNote(id): Note {
// Return the note that has an id matching the id passed in
return this.notes.find(note => note.id === id);
}
createNote(title): Promise<boolean> {
return new Promise((resolve) => {
// Create a unique id that is one larger than the current largest id
let id = Math.max(...this.notes.map(note => parseInt(note.id)), 0) + 1;
this.notes.push({
id: id.toString(),
title: title,
content: ''
});
this.save();
console.log('Service Log ' + this.notes);
resolve(true);
});
}
}
The HTML code:
<ion-header>
<ion-toolbar color="primary">
<ion-title>Notes</ion-title>
<ion-buttons slot="end">
<ion-button (click)="addNote()">
<ion-icon slot="icon-only" name="clipboard"></ion-icon>
</ion-button>
</ion-buttons>
</ion-toolbar>
</ion-header>
<ion-content>
<ion-list>
<ion-item button detail *ngFor="let note of notesService.notes" [href]="'/notes/' + note.id" routerDirection="forward">
<ion-label>{{ note.title }}</ion-label>
</ion-item>
</ion-list>
</ion-content>
I've followed the same tutorial and got the same issue. The issue is because of something very interesting and powerful called Zones.
The idea is that you'd need to let Angular know that the array with the notes has changed, by doing something like this:
// Angular
import { Component, NgZone } from '#angular/core';
// Ionic
import { NavController, AlertController } from '#ionic/angular';
// Services
import { NotesService } from '../services/notes.service';
import { AlertOptions } from '#ionic/core';
#Component({
selector: 'app-home',
templateUrl: 'home.page.html',
styleUrls: ['home.page.scss'],
})
export class HomePage {
constructor(
private ngZone: NgZone, // Add this in the constructor
private navCtrl: NavController,
private alertCtrl: AlertController,
private notesService: NotesService,
) { }
ngOnInit() {
this.notesService.load();
}
addNote() {
const alertOptions: AlertOptions = {
header: 'New Note',
message: 'What should the title of this note be?',
inputs: [
{
type: 'text',
name: 'title'
}
],
buttons: [
{
text: 'Cancel'
},
{
text: 'Save',
handler: (data) => {
// Create the note inside a Zone so that Angular knows
// that something has changed and the view should be updated
this.ngZone.run(() => {
this.notesService.createNote(data.title);
});
}
}
]
};
this.alertCtrl
.create(alertOptions)
.then((alert) => {
alert.present();
});
}
}
I have implemented a side-menu in Ionic2.I am getting "Invalid link" when i click on the Event or Map button on the side-menu and sometimes i get the error as "Invalid Views to insert". I tried removing quotes from the calendar and gmap but it does not work out.
Please guide.
This is my TS file:
import { Component } from '#angular/core';
import { Platform , IonicPage } from 'ionic-angular';
import { StatusBar } from '#ionic-native/status-bar';
import { SplashScreen } from '#ionic-native/splash-screen';
import { CalendarPage } from '../pages/calendar/calendar'
import { GmapPage } from '../pages/gmap/gmap'
import firebase from 'firebase';
import { LoginPage } from '../pages/login/login';
import { ViewChild } from '#angular/core';
import { NavController } from 'ionic-angular/navigation/nav-controller';
import { AuthProvider } from '../providers/auth/auth';
#IonicPage()
#Component({
templateUrl: 'app.html'
})
export class MyApp {
calendar: CalendarPage;
gmap: GmapPage;
#ViewChild('nav') nav: NavController;
rootPage: any = CalendarPage;
pages = []
constructor(platform: Platform, statusBar: StatusBar, splashScreen:SplashScreen,
public authProvider: AuthProvider) {
platform.ready().then(() => {
// Okay, so the platform is ready and our plugins are available.
// Here you can do any higher level native things you might need.
statusBar.styleDefault();
splashScreen.hide();
const unsubscribe = firebase.auth().onAuthStateChanged(user => {
if (!user) {
this.rootPage = 'LoginPage';
unsubscribe();
} else {
this.rootPage = 'EventPage';
unsubscribe();
}
});
});
}
onLoad(page : string) {
this.nav.setRoot(page);
}
onLogout(){
this.authProvider.logoutUser();
}
}
This is my HTML code :
<ion-menu [content] = "nav">
<ion-header>
<ion-toolbar>
<ion-title>Menu</ion-title>
</ion-toolbar>
</ion-header>
<ion-content>
<ion-list>
<button ion-item (click) = "onLoad('calendar')">Events</button>
<button ion-item (click) = "onLoad('gmap')">Maps</button>
<button ion-item (click) = "onLogout()">Logout</button>
</ion-list>
</ion-content>
</ion-menu>
<ion-nav [root]="rootPage" #nav></ion-nav>
How to hide native android keyboard when clicking on text box using IONIC 2? I have installed IONIC keyboard plugin from https://ionicframework.com/docs/native/keyboard/ link and uses this.keyboard.close();
But still keyboard is opening. Help me how to close the keyboard. I am basically showing DOB from the datepicker plugin in a TEXTBOXenter image description here.
This is the ts file(datepicker1.ts)
import { Component } from '#angular/core';
import { IonicPage, NavController, NavParams } from 'ionic-angular';
import { DatePicker } from '#ionic-native/date-picker';
import { Keyboard } from '#ionic-native/keyboard';
#IonicPage()
#Component({
selector: 'page-datepicker1',
templateUrl: 'datepicker1.html',
})
export class Datepicker1Page {
public today:any;
constructor(public navCtrl: NavController, public navParams: NavParams,private datePicker: DatePicker,private keyboard: Keyboard) {
}
ionViewDidLoad() {
console.log('ionViewDidLoad Datepicker1Page');
}
openDatepicker()
{
this.keyboard.close();
this.datePicker.show({
date: new Date(),
mode: 'date',
androidTheme: this.datePicker.ANDROID_THEMES.THEME_DEVICE_DEFAULT_LIGHT
}).then(
date => {
this.today=date.getDate()+'/'+date.getMonth()+'/'+date.getFullYear()},
err => console.log('Error occurred while getting date: ', err)
);
}
}
And this is the datepicker1.html page
<ion-header>
<ion-navbar>
<ion-title>datepicker page</ion-title>
</ion-navbar>
</ion-header>
<ion-content padding>
<ion-item>
<ion-label>DOB</ion-label>
<ion-input type="text" name="DOB" (click)="openDatepicker()" [(ngModel)]="today" ng-readonly></ion-input>
</ion-item>
</ion-content>
You have missed to declare the today variable in the class and you missed to add disabled="true" in ion-input tag. Everything is working fine and I have tested it.
TS File
import { Component } from '#angular/core';
import { NavController } from 'ionic-angular';
import { Keyboard } from '#ionic-native/keyboard';
import { DatePicker } from '#ionic-native/date-picker';
#Component({
selector: 'page-home',
templateUrl: 'home.html'
})
export class HomePage {
constructor(public navCtrl: NavController, public keyboard : Keyboard, public datePicker : DatePicker) {
}
today : any;
openDatepicker(){
this.keyboard.close();
this.datePicker.show({
date: new Date(),
mode: 'date',
androidTheme: this.datePicker.ANDROID_THEMES.THEME_DEVICE_DEFAULT_LIGHT
}).then(
date => {
this.today=date.getDate()+'/'+date.getMonth()+'/'+date.getFullYear()},
err => console.log('Error occurred while getting date: ', err)
);
}
}
HTML File
<ion-header>
<ion-navbar>
<ion-title>
Ionic Blank
</ion-title>
</ion-navbar>
</ion-header>
<ion-content padding>
<ion-item>
<ion-label>DOB</ion-label>
<ion-input disabled="true" type="text" name="DOB" (click)="openDatepicker()" [(ngModel)]="today" ng-readonly></ion-input>
</ion-item>
</ion-content>
1) import { DatePicker } from '#ionic-native/date-picker/ngx'; in app.module.ts and keyboard.page.ts
2) public keyboard : Keyboard, in your constructor inject
3) https://ionicframework.com/docs/native/keyboard Take reference from this Official site
openDatepickerStart(){
setTimeout(() => {
this.keyboard.hide();
}, 100);
this.datePicker.show({
date: new Date(),
mode: 'date',
androidTheme: this.datePicker.ANDROID_THEMES.THEME_DEVICE_DEFAULT_LIGHT
}).then(
date => {
this.SelectDateModelDetails.get('StartTime').patchValue(date.getDate()+'/'+date.getMonth()+'/'+date.getFullYear())},
err => console.log('Error occurred while getting date: ', err)
);
}
I have a following flow in my Ionic 3 app which is powered with MobileFirst Platform V8:
WelcomePage --> HomePage --> ViewReportPage
When user opens a app he will land on WelcomePage where he enters his credentials. Once a credentials are validated then he will be taken to HomePage from where he will click View button to go to ViewReportPage.
In the ViewReportPage user clicks the search button to search the reports.
My problem is, when user clicks the search button then as soon as the service code sends the request to fetch the data from the server, I am getting redirected to HomePage. Don't know whats the problem is. Below is the code.
Strange thing is, this is only happening if I close the app and opens it and then follow the steps given above. If I go ViewReportPage after being redirected to HomePage and then click search button then I am not facing this issue and the app is working as it should.
ViewReportPage HTML
<ion-card>
<ion-list no-lines>
<ion-item>
<ion-label>Year</ion-label>
<ion-select [(ngModel)]="year">
<ion-option value="{{yearToSearch}}" *ngFor="let yearToSearch of years">{{yearToSearch}}</ion-option>
</ion-select>
</ion-item>
<ion-item>
<button round center padding class="align-center" color="secondary" ion-button (click)="search()">
<ion-icon ios="ios-search" md="md-search" class="ion-lable-icon-padding"></ion-icon>
Search
</button>
</ion-item>
</ion-list>
</ion-card>
ViewReport TS
#IonicPage()
#Component({
selector: 'page-view-report',
templateUrl: 'view-report.html',
})
export class ViewReportPage {
public years : number[] = null;
public year = null;
public corrData : any[] = null;
constructor(public navCtrl: NavController,
public navParams: NavParams,
public loginSrvc : LoginService,
public corrSrvc : ReportService,
public events: Events) {
let currentYear = new Date().getFullYear();
this.year = currentYear;
this.years = [
currentYear,
currentYear -1 ,
currentYear - 2
];
this.events.subscribe('corrResults',(value)=>{
this.corrData = this.corrSrvc.getReportData();
});
}
ionViewDidLoad() {
console.log('Hello ViewReportPage Page');
}
search(){
let searchData : ReportSearchModel = new ReportSearchModel(
this.loginSrvc.getUserId(),
this.loginSrvc.getEncodedSignature(),
this.year,
null
);
let invocationData = {
procedure : 'getReports',
parameters : searchData,
navController : this.navCtrl
};
this.corrSrvc.search(invocationData);
}
}
ReportService TS
search(invocationData){
let procedureName = invocationData.procedure;
let parameters = invocationData.parameters;
let nav : NavController = invocationData.navController;
this.nav = nav;
let isuserLoggedIn = this.loginService.checkForLoggedInUser();
this.ngZone.run(
() => {
let reqToSend = new WLResourceRequest('/adapters/MyMFPAdapter'+procedureName, WLResourceRequest.GET);
let jsonToStingData = JSON.stringify(parameters);
reqToSend.setQueryParameter("params", `[${jsonToStingData}]`);
reqToSend.send().then((response) => {
let invocationResponse = response.responseJSON;
//resolve(response.responseJSON);
console.log(invocationResponse);
this.corrData = invocationResponse['reportBeans'];
if(this.corrData == null || this.corrData == undefined || this.corrData.length < 1){
alert('No Report Found');
}
this.events.publish('corrResults','results');
});
}
);
}
getCorrespondenceData(){
return this.corrData;
}
I am trying to make use of the Ionic DateTime component. I have the following code, but nothing displays (just the label and button). If anyone can advise, I would appreciate it.
datetime.html
<ion-header>
<ion-navbar>
<ion-title>Last Online</ion-title>
</ion-navbar>
</ion-header>
<ion-content padding>
<center>
<ion-spinner icon="android" *ngIf="loading"></ion-spinner>
</center>
<ion-row>
<ion-col>
<center>
<ion-label>Last Online</ion-label>
<ion-datetime displayFormat="h:mm A" pickerFormat="h mm A" [(ngModel)]="event.timeStarts"></ion-datetime>
</center>
</ion-col>
</ion-row>
<ion-buttons>
<button (click)="done()" block round class="form-button-text">{{'Done'}}</button>
</ion-buttons>
</ion-content>
datetime.ts
import { Component } from '#angular/core';
import { NavController, NavParams, Events } from 'ionic-angular';
import { JobModel } from '../model/jobModel';
#Component({
templateUrl: 'build/pages/datetime/datetime.html'
})
export class DateTimePage {
private loading: boolean = true;
private jobModel: JobModel = null;
private event: Events = null;
constructor(private nav: NavController, private navParams: NavParams, event: Events) {
this.event = event;
this.jobModel = navParams.get('jobModel');
if (!this.jobModel) {
this.jobModel = new JobModel();
}
this.loading = false;
}
private done(): void {
alert('todo');
}
}
The following works, it's a different date picker.
http://ionicframework.com/docs/v2/components/#datetime