I am Beginner to ionic 2
Below are my HTML code which am using to enable side menu using ionic framework
<ion-content>
<ion-list *ngIf="!isUserLoggedIn()">
<button menuClose ion-item *ngFor="let p of loginPages" (click)="openPage(p)">
{{p.title}}
</button>
</ion-list>
<ion-list *ngIf="isUserLoggedIn()">
<button menuClose ion-item *ngFor="let p of logoutpages" (click)="openPage(p)">
{{p.title}}
</button>
</ion-list>
</ion-content>
This is my app component
currentuser;
#ViewChild(Nav) nav: Nav;
auth:any;
rootPage: any = LoginPage;
loginPages:PageInterface[]=[
{ title: 'Login', component: LoginPage }
];
logoutpages :PageInterface[] = [
{ title: 'My Complaints', component: MycomplaintsPage },
{ title:'My Neighbours',component:NeighboursPage},
{ title:'Notifications',component:NotificationsPage},
{ title:'Directory',component:TabsPage},
{ title:'chat',component:ChatlistPage},
{ title:'Events',component:EventPage},
{ title:'settings',component:SettingsPage},
{ title: 'LogOut',component:LoginPage,logsOut:true }
];
isUserLoggedIn(): boolean {
let user = this.authservice.getcurrentuser();
return user !== null;
}
already i display logoutpages based on isUserLoggedIn.
I need display another menu based on userrole with conditions
Kindly advice me,
Thanks & Regards
You can give ID to the menu and enable or disable the menu based on your condition.
https://github.com/driftyco/ionic/tree/master/demos/src/menu
menu.enable(true/false, #menu);
Related
I am calling an alert on my Page.
addError(title,message){
const alert = this.alertCtrl.create({
'title': title,
'subTitle': message,
'buttons': ['OK']
});
alert.present();
}
Html Code with content including button and textbox.
<ion-content padding>
<ion-list>
<ion-item>
<ion-label fixed>Name</ion-label>
<ion-input type="text" [(ngModel)]="name"></ion-input>
</ion-item>
<ion-item>
<ion-label fixed>Secret</ion-label>
<ion-input type="text" [(ngModel)]="secret"></ion-input>
</ion-item>
</ion-list>
<div padding>
<button ion-button color="primary" (click)="add();" block>Add New</button>
</div>
</ion-content>
The Entire .ts code is given below with class definition
class HomePage {
name:string;
secret:string;
constructor(public navCtrl: NavController,public alertCtrl: AlertController,public strorage:StorageServiceProvider) {
}
addError(title,message){
const alert = this.alertCtrl.create({
'title': title,
'subTitle': message,
'buttons': [{
text: "Cancel", handler: () => {
alert.dismiss();
return false;
}
}]
});
alert.present();
}
add(){
if(this.name && this.secret){
this.strorage.addNew({'name':this.name,'secret':this.secret});
}
else{
this.addError("Error","Please enter Secret name and Secret");
}
}
}
I am getting the following error while I am calling the addError again.
Uncaught (in promise): removeView was not found
The problem is not coming from addError function and alertController.
The problem may occurs because of local storage usage this.strorage.addNew({'name':this.name,'secret':this.secret});
This localStorage usage must be as like
this.storage.addNew( key, value )
this.storage.addNew( 'error', {'name':this.name,'secret':this.secret} )
In your code there is no key !..
I have implemented tabs on a modal.
Here is the code:
Pagewithmodal.ts
getFoodInfo(food) {
let foodModal = this.modalCtrl.create('TabspagePage', { Model: food, Api: this.api, Title: 'Food Infopedia' });
foodModal.onDidDismiss(option => {
console.log(option);
});
foodModal.present();
}
TabspagePage.html
<ion-tabs>
<ion-tab tabIcon="heart" [root]="tabNutri" tabTitle="Nutritional" [rootParams]="model"></ion-tab>
<ion-tab tabIcon="star" [root]="tabIngre" tabTitle="Ingredients" [rootParams]="model"></ion-tab>
</ion-tabs>
TabspagePage.ts
this.tabIngre = 'IngreinfoPage';
this.tabNutri = 'FoodinfoPage';
this.model = { 'Api': navParams.data.Api, 'Model': navParams.data.Model };
IngreinfoPage.html
<ion-header>
<ion-navbar color="header">
<ion-title>Food Infopedia</ion-title>
<ion-buttons end>
<button ion-button color="light" clear icon-only (click)="dismiss()">
<ion-icon name='close' is-active="true"></ion-icon>
</button>
</ion-buttons>
</ion-navbar>
</ion-header>
IngreinfoPage.ts
dismiss() {
this.viewCtrl.dismiss();
}
When I click the close button, dismiss() function is called, and i'm getting an error Runtime Error
Uncaught (in promise): navigation stack needs at least one root page
<ion-tab tabIcon="star" [root]="tabIngre" tabTitle="Ingredients" [rootParams]="model"></ion-tab>
This will create a new nav stack with root page as your modal page: IngreinfoPage.
And when you dismiss from IngreinfoPage,it will remove only IngreinfoPage and the stack will have no root page.
If you want to dismiss the tabs modal, you will have to dismiss from the TabspagePage i.e. create a dismiss function in TabsPagePage and maybe use Events API to call the function on close.
i am trying to set icons on the side navigation panel of an ionic2 application, Please suggest how would i get this done?
Here is my code :
export class MyApp {
#ViewChild(Nav) nav: Nav;
rootPage: any = MysplashPage;
private dashboardpage;
private gradesubjectpage;
private myhomepage;
pages: Array<{title: string, component: any}>;
constructor(public platform: Platform, public statusBar: StatusBar, public splashScreen: SplashScreen) {
this.initializeApp();
this.pages = [
{ title: 'Explore', component: HomePage },
{ title: 'Dashboard', component: DashboardPage }
];
}
initializeApp() {
this.platform.ready().then(() => {
this.statusBar.styleDefault();
// this.splashScreen.hide();
});
}
openPage(pages) {
if(pages.component == HomePage){
this.nav.setRoot(HomePage);
} else {
this.nav.push(pages.component);
}
}
}
Here on the html page i am going to display it with the help of loop, where should i use the different icons for the menu items in the side navigation panel.
<ion-list>
<button menuClose ion-item *ngFor="let p of pages" (click)="openPage(p)">
<b>{{p.title}}</b>
</button>
</ion-list>
You'll add an icon like in every list, in this case since the list content is coming from a variable and used in ng-for you'll declare the icon in your object.
app.component.ts:
this.pages = [
{ title: 'Explore', component: HomePage, icon: 'home' }, //OR THE ICON YOU WANT
{ title: 'Dashboard', component: DashboardPage, icon: 'clipboard' }
];
}
And in your HTML:
<ion-list>
<button menuClose ion-item *ngFor="let p of pages" (click)="openPage(p)">
<b>{{p.title}}</b> <ion-icon item-right name="{{p.icon}}"></ion-icon>
<!-- item-right attribute on ion-icon will push the icon to the for right -->
</button>
</ion-list>
Check here for all the available icons.
Hope this helps
I am presently using check boxes to track when tasks have been completed in my ionic 2 App. Is there a way save the date/time from the mobile device when this checkbox is selected.
<ion-list>
<ion-item>
<ion-label>Task 1</ion-label>
<ion-checkbox [(ngModel)]="data.task1"></ion-checkbox>
</ion-item>
</ion-list>
You could use the Date object from Javascript to do so, like you can see in this plunker.
Your Component:
import { Component } from "#angular/core";
#Component({
templateUrl:"home.html"
})
export class HomePage {
public data: any;
public dateTime : string = '';
constructor() {
this.data = {
task1 : false
}
}
public changeCheckBox() {
if(this.data.task1) {
this.dateTime = new Date();
}
}
}
Your view:
<ion-content>
<ion-list>
<ion-item>
<ion-label>Task 1</ion-label>
<ion-checkbox [(ngModel)]="data.task1" (ionChange)="changeCheckBox()"></ion-checkbox>
</ion-item>
<ion-item>
<ion-label>Timestamp: {{ dateTime }}</ion-label>
</ion-item>
</ion-list>
</ion-content>
Of course you can obtain detailed information by using some of the get methods:
Date.prototype.getDate()
Date.prototype.getDay()
Date.prototype.getFullYear()
Date.prototype.getHours()
Date.prototype.getMilliseconds()
Date.prototype.getMinutes()
Date.prototype.getMonth()
Date.prototype.getSeconds()
Date.prototype.getTime()
Date.prototype.getTimezoneOffset()
Date.prototype.getUTCDate()
Date.prototype.getUTCDay()
Date.prototype.getUTCFullYear()
Date.prototype.getUTCHours()
Date.prototype.getUTCMilliseconds()
Date.prototype.getUTCMinutes()
Date.prototype.getUTCMonth()
Date.prototype.getUTCSeconds()
Date.prototype.getYear()
I am new to ember, developing Filtering by date functionality using ember js.
handle bars:
<div class="input-group date" data-behavior="ActiveRock.filterDatePicker" data-date-before-field="#filter_end_date">
<input type="text" class="form-control" id="filter_start_date" {{action filterPortfolios}}/>
<span class="input-group-addon">
<span class="glyphicon glyphicon-calendar"></span>
</span>
</div>
Behaviour:
$ ->
ActiveRock.datePicker = (el) ->
el.datepicker(
format: 'yyyy/mm/dd'
autoclose: true
).on('show', (e) ->
$('.datepicker').css('z-index', '1151')
true
).on('hide', (e) ->
logic
return false
true
)
controller action: filterPortfolios
included bootstrap datepicker
but it is not working, please suggest any solution.
Thanks,
Prasad.
In behavior I written like taht
$(function() {
return ExamplePicker.filterDatePicker = function(el) {
return el.datepicker({
format: 'yyyy/mm/dd',
autoclose: true
}).on('changeDate', function(e) {
var controller;
controller = App.__container__.lookup("controller:<controller_name>");
controller.send("<action_name>");
return true;
});
};
});