I implemented a toggle switch in a segment as follow:
<ion-menu [content]="content" side="left" id="menuParameter">
<ion-header>
<ion-toolbar color="default">
<ion-segment [(ngModel)]="menu">
<ion-segment-button value="segment1">
<ion-title>
Segment1 without toggle (initialization segment)
</ion-title>
</ion-segment-button>
<ion-segment-button value="segment2">
<ion-title>
Segment 2 with toggle switch
</ion-title>
</ion-segment-button>
</ion-segment>
</ion-toolbar>
</ion-header>
<ion-content>
<div [ngSwitch]="menu">
<ion-list *ngSwitchCase="'segment1'">
By default here we are
</ion-list>
<ion-list *ngSwitchCase="'segment2'">
<!--impossible to bind because by default i am not in segment 2 but in segment 1, so the toggle switch is not set with true value-->
<ion-item>
<ion-label>There will be cake</ion-label>
<ion-label> {{isToggledd}} </ion-label>
<ion-toggle [(ngModel)]="isToggled" (ionChange)="notify()"></ion-toggle>
</ion-item>
</ion-list>
</div>
</ion-content>
</ion-menu>
here is my controller :
export class AppComponent {
rootPage:any = HomePage;
public isToggled: boolean;
public menu: string = 'segment1'; /*show segment1 by default*/
constructor(
public platform: Platform,
public statusBar: StatusBar) {}
this.isToggled = true; /*toggle Switch set as TRUE*/
public notify() {
console.log("Toggled: "+ this.isToggled);
}}
So doing this I expect in my SEGMENT2 to have this behaviour
but the behaviour i get is the following :
BUT surprisingly, if a move the toggle switch into the segment 1, the toggle behaviour is ok :
Note the Toggle value is always "true".
any help ?
when clicking twice on segment 2 it is ok.
So it is possible to programmatically trigger a second click automatically (clicking a second time on segment 2 button when selected) ?
Related
I need to build a scalable menu for an ionic 2/3 app (preferably using ion-menu). Following the guides on the docs the menu should be a sibling of the main content and they suggest to keep it inside app.html, which is a very high place inside the app that doesn't have to be crowded too much.
If we have a big menu or if we need to use several different menus, triggered by actions inside app, this place is not appropriate for this purpose.
I want to hide the complexity of the menu in it's own container/component and handle the logic outside app.component.ts.
app.html should stay slim and a construction like the one below may be useful.
<app-menu></app-menu> // this should be the enclosing container of the menu logic
<ion-nav [root]="rootPage" #content swipeBackEnabled="false"></ion-nav>
If I do this, the following error comes up:
Menu: must have a [content] element to listen for drag events on. Example:
<ion-menu [content]="content"></ion-menu>
<ion-nav #content></ion-nav>
Any thoughts on how to implement this, avoiding to add code directly to app.html and app.component.ts?
Tks
error code just tells you to write <ion-nav #content></ion-nav> if you use <ion-menu [content]="content"></ion-menu>...
example toggle menu code below ...
<ion-header>
<ion-navbar color="danger">
<ion-buttons start>
<button ion-button icon-only menuToggle>
<ion-icon name="menu">
</ion-icon>
</button>
</ion-buttons>
</ion-navbar>
<ion-menu [content]="content">
<ion-content padding>
this is awkmal
</ion-content>
</ion-menu>
</ion-header>
<ion-nav #content></ion-nav>
I have one view in portrait mode and another in landscape mode where I want to show chart and I hide tabs and header (fullscreen mode, no scrolling). My view in landscape mode would look something like this:
<div showWhen="landscape" class="chart-settings split-container">
<ion-toolbar showWhen="landscape">
<ion-grid>
<ion-row>
<ion-col col-6>
<ion-item>
<ion-label>Period</ion-label>
<ion-select [(ngModel)]="period">
//options
</ion-select>
</ion-item>
</ion-col>
<ion-col col-6>
<ion-item>
<ion-label>Won/Lost</ion-label>
<ion-select [(ngModel)]="gender">
//options
</ion-select>
</ion-item>
</ion-col>
</ion-row>
</ion-grid>
</ion-toolbar>
<div class="flexChart">
<div id="chartdiv" [style.width.%]="100" [style.height.%]="100"></div>
</div>
I use flex to fill out the page and create "fullscreen effect with no scrolling".
Thanks
Well it seems there is this:
http://ionicframework.com/docs/api/platform/Platform/
It has:
isPortrait()
isLandscape()
so you can do:
platform.isPortrait() or platform.isLandscape()
if you inject platform into constructor.
Combine this with *NgIf:
https://angular.io/guide/template-syntax#ngif
CSS overflow, overflow-x, overflow-y is what you'd look to for prevent scrolling provided it's a block level container:
https://developer.mozilla.org/en/docs/Web/CSS/overflow
UPDATE
Based on this comment:
That was my initial thought. The problem with this is that it leaves
padding on top. I solved it by configuring styles, but it seemed
pretty dirty solution to me
You can fix that padding issue by getting the instance of the Content and call the resize() method like this:
import { Component, ViewChild } from '#angular/core';
import { Content } from 'ionic-angular';
#Component({...})
export class MyPage{
#ViewChild(Content) content: Content;
public yourMethod(): void {
this.content.resize();
}
}
https://ionicframework.com/docs/api/components/content/Content/#resize
Tell the content to recalculate its dimensions. This should be called
after dynamically adding/removing headers, footers, or tabs.
You can check landscape or portrait with platform, then you can get the ref of nav from template:
<ion-header>
<ion-navbar #navBar>
...
</ion-navbar>
</ion-header>
and call setHidden(true) in component with its ref:
#ViewChild('navBar') navBar: Navbar
// call in proper place
this.navBar.setHidden(true)
for tabs, I think you can do in the same way
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);
I'm struggling with putting a map on a second segment. It's a typical problem, and I've found several solutions, but they don't work for me because the events seem to get fired before the segment is build completely. I don't know if this is because of a breaking change in Ionic, or because I am doing it wrong.
page.html:
<ion-toolbar>
<ion-segment [(ngModel)]="view" (ionChange)="changeSegment()">
<ion-segment-button value="list">
<ion-icon name="list-box" isActive="false"></ion-icon>
</ion-segment-button>
<ion-segment-button value="map" (ionSelect)="selectMap()">
<ion-icon name="map" isActive="false"></ion-icon>
</ion-segment-button>
</ion-segment>
</ion-toolbar>
<ion-content [ngSwitch]="view">
<div *ngSwitchCase="'list'"></div>
<div *ngSwitchCase="'map'">
<div id='map'>Here the map comes.</div>
</div>
</ion-content>
page.js:
import {Component} from "#angular/core";
#Component({
templateUrl: 'build/pages/page/page.html'
})
export class Timeline {
constructor() {
this.view = "list";
this.selectMap = function() {
console.log("selectMap:", document.getElementById("map"));
}
this.changeSegment = function() {
console.log("changeSegment:", document.getElementById("map"));
}
}
}
(Yeah, that project is using JavaScript, not TypeScript.)
With both the change and the select events, on first click they return "null" for the map element, and only on a second click they return the correct element.
To me it looks like the events are fired before the segment is complete. (But I may just as well be making a stupid beginners mistake...)
How do I know when the #map element is available?
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()