I have an app that uses a side menu and tabs based off the Ionic Conference App. The app works as expected at the start and the tabs and side menu are both shown but when you go to a non-tabs page and then back to a tabs page via the side menu the tabs disappear. Here’s my relevant code. Any one have any ideas why this may not be working as expected? :x
export class MyApp {
// Reference to the app's root nav
#ViewChild(Nav) nav: Nav;
rootPage: any;
pages: PageInterface[] = [
{ title: 'Applications', pageName: 'HomePage', index: 0, icon: 'home' },
{ title: 'New Entries ', pageName: 'JobEntryPage', index: 1, icon: 'map' },
{ title: 'Statistics', pageName: 'StatisticsPage', index: 2, icon: 'stats'},
];
socialPages: PageInterface[] = [
{ title: 'Company List', pageName: 'CompaniesPage', component:
'CompaniesPage', icon: 'log-out'}
];
accountPages: PageInterface[] = [
{ title: 'Profile', pageName: 'ProfilePage', component: 'ProfilePage', icon:
'person' },
{ title: 'Logout', pageName: 'LogoutPage', component: 'LogoutPage', icon:
'log-out'}
];
constructor(public platform: Platform, public statusBar: StatusBar, public
splashScreen: SplashScreen,
private afAuth: AngularFireAuth, public fb: FirebaseProvider,
public menu: MenuController) {
this.initializeApp();
this.afAuth.authState.subscribe(auth => {
if(!auth)
this.rootPage = 'LoginPage';
else
this.rootPage = 'TabsPage';
});
}
initializeApp() {
this.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.
this.statusBar.styleDefault();
this.splashScreen.hide();
});
}
openPage(page: PageInterface) {
let params = {};
// the nav component was found using #ViewChild(Nav)
// setRoot on the nav to remove previous pages and only have this page
// we wouldn't want the back button to show in this scenario
if (page.index) {
params = { tabIndex: page.index };
}
// If we are already on tabs just change the selected tab
// don't setRoot again, this maintains the history stack of the
// tabs even if changing them from the menu
if (this.nav.getActiveChildNavs().length && page.index != undefined) {
this.nav.getActiveChildNavs()[0].select(page.index);
// Set the root of the nav with params if it's a tab index
} else {
console.log(page.pageName)
this.nav.setRoot(page.pageName, params).catch((err: any) => {
console.log(`Didn't set nav root: ${err}`);
});
}
}
Related
I want to control the data after I enter the index page from quiz page, but I found that it's not possible to control the data by the method below, is it because the afterEach is global ?
Is there any other method that I can use to control the data inside index page when I came from the quiz page ?
I thought of using the vuex, if there's no other way, I'll try it.
this is my route:
const routes: RouteRecordRaw[] = [
{
path: '/',
component: () => import('layouts/MainLayout.vue'),
children: [
{
name: 'index',
path: '/',
component: () => import('pages/IndexPage.vue')
},
{
name: 'quiz',
path: '/quiz',
component: () => import('pages/QuizPage.vue')
},
],
},
this is my code in index:
setup() {
const router = useRouter()
const state = ref(1)
router.afterEach((to, from) => {
if (from.name === 'quiz') {
state.value = 2
}
})
return {
state,
}
}
I have a Menu in Syncfusion Angular. The Menu Item should navigate to an URL in new tab. It is opening in same tab by overriding the website. How to acheive this.
#ViewChild('sidebarMenuInstance')
public sidebarMenuInstance: SidebarComponent;
#ViewChild('menu')
private menuObj: MenuComponent;
public menuItems: MenuItemModel[] = [
{
text: 'Menu Item',
iconCss: 'icon',
items: [
{
text: 'Link', iconCss: 'icon-picture icon', url: 'https://www.w3.org/WAI/ER/tests/xhtml/testfiles/resources/pdf/dummy.pdf',
}
],
}
];
private beforeItemRender(args: MenuEventArgs): void {
if (args.item.url) {
// To open url in blank page.
args.element.getElementsByTagName('a')[0].setAttribute('target', '_blank');
}
I am very new to Aurelia and just trying to apply navigation to my project.Though i import aurelia-router still it says RouterConfiguration and Router are undefined in constructor
import {Todo} from './ToDo/todo';
import {RouterConfiguration, Router} from 'aurelia-router';
export class App {
heading = "Todos";
todos: Todo[] = [];
todoDescription = '';
router :any;
list: any[];
constructor(RouterConfiguration: RouterConfiguration, Router: Router) {
this.todos = [];
this.configureRouter(RouterConfiguration, Router);
//console.log("klist", this.list);
}
//config.map() adds route(s) to the router. Although only route, name,
//moduleId, href and nav are shown above there are other properties that can be included in a route.
//The class name for each route is
configureRouter(config: RouterConfiguration, router: Router): void {
this.router = router;
config.title = 'Aurelia';
config.map([
{ route: '', name: 'home', moduleId: 'home/home', nav: true, title: 'Home' },
{ route: 'users', name: 'users', moduleId: './Friends/Friends', nav: true },
//{ route: 'users/:id/detail', name: 'userDetail', moduleId: 'users/detail' },
//{ route: 'files/*path', name: 'files', moduleId: 'files/index', href: '#files', nav: 0 }
]);
}
addTodo() {
if (this.todoDescription) {
this.todos.push(new Todo(this.todoDescription));
// this.todoDescription = '';
}
}
}
By convention, Aurelia looks in the initial class that loads (App) for the configureRouter() function and executes it. This means, you do not have to inject anything in the constructor.
It looks like you've simply added too much. I think fixing your sample seems to be as easy as removing some stuff, like so:
import { Todo } from './ToDo/todo';
import { RouterConfiguration, Router } from 'aurelia-router';
export class App {
heading = "Todos";
todos: Todo[] = [];
todoDescription = '';
list: any[];
constructor() {
// note: removed routing here entirely (you don't need it)
// also, you've already declared this.todos above, so no need to do it here again
}
configureRouter(config : RouterConfiguration, router : Router): void {
this.router = router;
config.title = 'Aurelia';
config.map([
{ route: '', name: 'home', moduleId: 'home/home', nav: true, title: 'Home' },
{ route: 'users', name: 'users', moduleId: './Friends/Friends', nav: true }
]);
}
addTodo() {
// removed this for brevity
}
}
This should resolve your 'undefined' errors on Router and RouteConfiguration. As an additional note, don't forget to add the <router-view> to your html template as well. Otherwise, you'll get no errors but the views won't show up either:
<template>
<div class="content">
<router-view></router-view>
</div>
</template>
Great documentation on this can be found at the Aurelia Docs - Routing.
I am building an Ionic2 app. I have an alert like following:
constructor(private platform: Platform, public nav : NavController,
public exhibitionSurveyObjectService : ExhibitionSurveyObjectService ) {
this.initializeMap();
this.nav=nav;
this.testArray=[];
this.area=null;
}
addSurveyObject(){
let prompt = Alert.create({
title: 'Subscribe to our service',
message: "All the fields are necessary",
inputs: [
{
name: 'name',
placeholder: 'Name'
},
....
{
name: 'cycle',
placeholder: 'Cycle: once/weekly/monthly'
},
{
name: 'object_type',
placeholder: 'Farm/Solarpanel/plain'
},
],
buttons: [
....
{
text: 'Save',
handler: data => {
this.createExhibitionSuveyObject(data);
}
}
]
});
this.nav.present(prompt);
}
createExhibitionSuveyObject(data: any){
var cycle = data.cycle;
cycle = cycle.toUpperCase()
console.log(cycle)
var type = data.object_type;
type = type.toUpperCase()
console.log(type)
this.exhibitionSurveyObjectService.addObject(
data.name, data.farmer_email,
data.farmer_name, data.size, data.path, cycle, type).subscribe(
response => {
this.exhibitionSurveyObjects = response;
this.sayThanks();
},
error => {
this.errorMessage = <any>error;
console.log("error")
}
);
}
sayThanks(){
let alert = Alert.create({
title: 'Thank you!',
subTitle: 'We have received your data, we will get back to you soon!',
buttons: [{
text: 'Ok',
handler: () => {
this.nav.push(HomePage)
}
}]
});
this.nav.present(alert);
}
I want the last two fields to be dropdowns. How can I achieve this?
UPDATE: updated the code snippet with some more code. How it can be updated to use Modal instead of alert?
Just like you can see in Ionic2 docs
Alerts can also include several different inputs whose data can be
passed back to the app. Inputs can be used as a simple way to prompt
users for information. Radios, checkboxes and text inputs are all
accepted, but they cannot be mixed. For example, an alert could have
all radio button inputs, or all checkbox inputs, but the same alert
cannot mix radio and checkbox inputs.
And...
If you require a complex form UI which doesn't fit within the
guidelines of an alert then we recommend building the form within a
modal instead.
So you'll have to create a new Component with that form and then use it to create the Modal:
import { Modal, NavController, NavParams } from 'ionic-angular';
#Component(...)
class YourPage {
constructor(nav: NavController) {
this.nav = nav;
}
presentSubscriptionModal() {
let subscriptionModal = Modal.create(Subscription, { yourParam: paramValue });
this.nav.present(subscriptionModal);
}
}
#Component(...)
class Subscription{
constructor(params: NavParams) {
let param = params.get('yourParam');
}
}
I'm using $ionicPopup.confirm() but I would like to change "cancel's button" text. Is it possible to do so ?
I'm aware of .show() syntax:
buttons: [
{ text: 'Cancel' }
]
But it does not seem to work with .confirm() ...
Thank 4 the help
At least in the latest release of Ionic (1.0.0) you can do the following:
var confirmPopup = $ionicPopup.confirm({
title: 'Popup title',
template: 'Popup text',
cancelText: 'Custom cancel',
okText: 'Custom ok'
}).then(function(res) {
if (res) {
console.log('confirmed');
}
});
Here is the relative documentation.
UPDATE : on ionic 1.0.0, this is now possible, check here
showConfirm Options :
{
title: '', // String. The title of the popup.
cssClass: '', // String, The custom CSS class name
subTitle: '', // String (optional). The sub-title of the popup.
template: '', // String (optional). The html template to place in the popup body.
templateUrl: '', // String (optional). The URL of an html template to place in the popup body.
cancelText: '', // String (default: 'Cancel'). The text of the Cancel button.
cancelType: '', // String (default: 'button-default'). The type of the Cancel button.
okText: '', // String (default: 'OK'). The text of the OK button.
okType: '', // String (default: 'button-positive'). The type of the OK button.
}
Yes you can do wathever you want, using ionic popup.show and bind the Cancel event.
$ionicPopup.show({
template: msg,
title: titleConfirm,
buttons: [
{ text: "BTN_NO",
onTap:function(e){
return false;
}
},
{ text: "BTN_OK",
onTap:function(e){
return true;
}
},
]
});
After investigation on the ionic popover.confirm function this is
not possible to customize it. The value of popover.confirm are hardcoded line 446
function showConfirm(opts) {
return showPopup(extend({
buttons: [{
text: opts.cancelText || 'Cancel',
type: opts.cancelType || 'button-default',
onTap: function() { return false; }
}, {
text: opts.okText || 'OK',
type: opts.okType || 'button-positive',
onTap: function() { return true; }
}]
}, opts || {}));
}
It's possible to do, you have to use the "type" thing inside the button
buttons: [
{ text: 'Cancel' },
{
text: '<b>Save</b>',
type: 'button-assertive',
onTap: function(e) {
$scope.request_form.abc = "accepted";
}
}
]
in the type part you have to give the class name , and you can change the color of the button.