I built an ionic5 application that utilizes a loop to add ion-slides whose content are different radio groups whose contents are pulled from an array. My problem is when I try to use slideNext or slideTo to switch slides, it fails to work. I can only get it to work after refreshing the browser and doesnt work at all when I build an android app and test.
The code I am trying is:
<ion-slides #quizSlider>
<ion-slide *ngFor="let question of questions;let i = index">
<ion-list lines="none">
<ion-radio-group [(ngModel)]="singleanswer">
<ion-item *ngFor="let answer of question.answers">
<ion-label>{{answer}}</ion-label>
<ion-radio slot="start" value="{{answer}}">
</ion-radio>
</ion-item>
</ion-radio-group>
<div fxLayout="row" fxLayoutAlign="center" >
<ion-button color="primary" (click)="checkUserAnswers(i)">Check</ion-button>
</div>
</ion-list>
</ion-slide>
</ion-slides>
And .ts code:
import { IonSlides } from '#ionic/angular';
#ViewChild('quizSlider') quizSlider: IonSlides;
export class Quiz {
questions: Question[];
constructor() {}
checkUserAnswers(questionNo)
{
if(this.questions.length == questionNo + 1)
{
this.router.navigate(['complete']);
}
else
{
console.log('test');
//this.quizSlider.slideNext();
//this.quizSlider.lockSwipes(false);
this.quizSlider.slideNext();
//this.quizSlider.lockSwipes(true);
//let currentIndex = this.quizSlider.getActiveIndex().then( (val) => console.log(val) );
//console.log('Current Slide: ' + currentIndex);
//this.quizSlider.slideTo(questionNo + 1);
}
}
}
Not sure if its related but the ionic environment I am using is:
Ionic CLI : 6.11.8
Ionic Framework : #ionic/angular 5.0.5
#angular-devkit/build-angular : 0.900.7
#angular-devkit/schematics : 9.0.7
#angular/cli : 9.0.7
#ionic/angular-toolkit : 2.2.0
UPDATE
I have attempted using swipe and I realized that (like the case of using button event) the slide change only works after the page is refreshed. I have tried downgrading to ionic4 but the problem has persisted
Related
I want to achieve below two functionalities :
toggle button ON/OFF. (Not want new details page to be open here)
clicking on CardView new details page should open.
On clicking cardView new details page opens, this working as expected.
but, currently on hitting toggle button new page opens. I need help to avoid it.
Html Code for cardview:
<ion-list *ngFor="let individual_room of data?.rooms">
<ion-list-header>
<ion-label>{{ individual_room.name}}</ion-label>
</ion-list-header>
<ion-grid>
<ion-row>
<ion-col *ngFor="let device of individual_room.devices">
<ion-card (click)="openDetailsWithState(device)">
<ion-col><img src="assets/icon/favicon.png" /></ion-col>
<ion-card-content>
<ion-card-title> {{ device.name }} <ion-badge item-end>{{ device.company }} </ion-badge> </ion-card-title>
<ion-toggle (ionChange)="deviceStatusChange(device)" [checked]="device.state =='ON'"></ion-toggle>
</ion-card-content>
</ion-card>
</ion-col>
</ion-row>
</ion-grid>
</ion-list>
home.page.ts :
deviceStatusChange(device: any) {
device.state = device.state === 'ON' ? 'OFF' : 'ON'
console.log('device toggle switch : ' + device.state)
}
openDetailsWithState(device: any) {
let navigationExtras: NavigationExtras = {
state: {
device: device,
},
}
this.router.navigate(['details'], navigationExtras)
}
I have a HomePage(main page) from which multiple modals are opened (modal1,modal2,modal3). On the last modal 'modal3', I have an ion-search with an ion-virtual-scroll to populate the results which will be show in a card.
Each of these card has an router-link attached to it.
Upon clicking on the card it should open a 'Page' which is associated with the id and present, but since its a page it does not show on top of the modal and is only visible once the modals are dismissed.
I have tried to follow the ion-nav from here but I couldn't get it working and got me all confused.
Modal 3 Code...
<ion-virtual-scroll [items]="this.speclFun.questions" approxItemHeight="185px">
<ion-card *virtualItem="let itemMod;" [routerLink]="['/main/user/tabs/home/view',itemMod.id]" (click)="openPage()">
<ion-row>
<ion-col size=" 12">
<ion-card-header class="card-header">
<ion-icon name="help-circle-outline" style="margin-right: 5px;"></ion-icon>
<ion-label>{{ itemMod.title }}</ion-label>
</ion-card-header>
</ion-col>
</ion-row>
<ion-row>
Modal 3 typeScript:
async openPage() {
const modal = this.modalController.create({
component: ModalBaseComponent,
componentProps: {
rootPage: AnswerPage
}
})
}
Shared Components module is declared as an import in my homepage.module.ts file.
Shared-component module :
modal-base component :
I am using ion-slide in ionic4 and i want to go for next slide manually by clicking on button. I have seen the ion-slide documentation in which they have mention slideNext method. But I don't know how to use this method for changing slide.
Ya, I got the solution. In ionic 4 you have to import IonSlides instead of Slides.
home.ts
import { IonSlides} from '#ionic/angular';
export class HomePage {
#ViewChild('mySlider') slides: IonSlides;
swipeNext(){
this.slides.slideNext();
}
}
home.html
<ion-slides pager="true" pager="false" #mySlider>
<ion-slide>
</ion-slide>
<ion-slide>
</ion-slide>
<ion-button (click)="swipeNext()">Next</ion-button>
</ion-slides>
In Angular 8 :
#ViewChild('mySlider', { static: true }) slides: IonSlides;
Is simple and just necessary in html
<ion-slides #slides pager="true">
<ion-slide>1
</ion-slide>
<ion-slide>2
</ion-slide>
</ion-slides>
<ion-button (click)="slides.slidePrev()" > Prev </ion-button>
<ion-button (click)="slides.slideNext()" > Next </ion-button>
Simple way (same as above answer but I tried to make it simpler):
import { Slides } from 'ionic-angular';
class abc {
#ViewChild(Slides)slides: Slides;
public next(){
this.slides.slideNext();
}
public prev(){
this.slides.slidePrev();
}
}
I have some troubles with setting range sliders inside ion-slides components.
Indeed, when I'm trying to swipe values of range, ionic detects I'm trying to swipe to another slide.
So I've two questions :
Is there a simple way to implement a range inside a ion-slide content with possibility to set data with range sliders without swiping to another slide and at the opposite, possibility to swipe to another slide without impacting range values.
If there isn't any simple way to do this, I've tried to changing direction of swipe to go to another slide, and according to the documentation I've tried it but I've compile error :
SyntaxError: /my/path/diagnostic.js: Unexpected token (8:18) while parsing file: /my/path/diagnostic.js so the error is targetting this line : diagnosticSlides = {
Here my code :
diagnostic.js
import {Page, NavController, NavParams, Slides} from 'ionic-angular';
#Page({
templateUrl: 'build/pages/diagnostic/diagnostic.html'
})
export class DiagnosticPage {
// Code for changing swiping direction -- not working
diagnosticSlides = {
initialSlide: 1,
loop: false,
direction: 'vertical'
};
static get parameters() {
return [[NavController], [NavParams]];
}
constructor(nav, navParams) {
this.nav = nav;
}
}
diagnostic.html
<ion-slides [options]="diagnosticSlides" pager>
<ion-slide style="background-color: blue">
<div class="item range">
<i class="icon ion-volume-low"></i>
<input type="range" name="volume">
<i class="icon ion-volume-high"></i>
</div>
</ion-slide>
<ion-slide style="background-color: red">
<h2>Other slide</h2>
</ion-slide>
</ion-slides>
Could you help me please ?
Thanks by advance,
From Ionic documentation available range component
So you can use ionFocus and ionBlur of this component and use lockSwipes(true) method between these two events.
public swipe: IonSlides;
#ViewChild(IonRange) range: IonRange;
this.range.ionFocus.subscribe(() => {
this.swipe.lockSwipes(true);
});
this.range.ionBlur.subscribe(() => {
this.swipe.lockSwipes(false);
});
Your system information:
Cordova CLI: 6.0.0
Ionic Version: 1.2.4
Ionic CLI Version: 1.7.14
Ionic App Lib Version: 0.7.0
OS:
Node Version: v5.5.0
<ion-view view-title="Change Header" class="bar-assertive">
<ion-content>
<ion-list>
<ion-radio ng-model="color" ng-value="'bar-stable'">Stable</ion-radio>
<ion-radio ng-model="color" ng-value="'bar-assertive'">Assertive</ion-radio>
<ion-radio ng-model="color" ng-value="'bar-calm'">Calm</ion-radio>
</ion-list>
<span ng-bind="color"></span>
</ion-content>
</ion-view>
As you can see the code above, I add class="bar-assertive" to ion-view tags, and the navbar should change color to red, but the result remain the same with previous. There's no change in background-color of the navbar
You can set the nav-bar-color in your index with this code:
<ion-nav-bar class="bar-assertive"></ion-nav-bar>
<ion-nav-view></ion-nav-view>
If you need to customize nav-bar (i.e. apply a specific class) add an <ion-nav-bar> tag inside the <ion-view> you want with a custom nav bar:
<ion-nav-bar align-title="right" class="bar-positive">...</ion-nav-bar>
Here is an example: http://codepen.io/beaver71/pen/XXeydY
But if you want to set different color for each tabs/view you could also use ngClass and $stateChangeSuccess:
<ion-nav-bar ng-class="headerClass"></ion-nav-bar>
<ion-nav-view></ion-nav-view>
In your app (in run section) you have to set $scope.headerClass according to the current state:
.run(function($state, $rootScope) {
$rootScope.$on('$stateChangeSuccess', function (evt, toState) {
if (toState.name == "xyz") {
$rootScope.headerClass = 'bar-positive';
} else {
$rootScope.headerClass = 'bar-assertive';
}
});
})