Making ion slides slide vertically - javascript

I have start.html file having options property having of the and I will define them in options1 in class StartPage
<ion-slide [options]="option1" *ngFor="let slide of slides; let last = last">
<img [src]="slide.image" class="slide-image"/>
<h2 class="slide-title" [innerHTML]="slide.title" style=""></h2>
<p [innerHTML]="slide.description"></p>
<div id="skip-b">
<button (click)="dismiss()">
{{last ? "Let's Begin" : "Skip" }}
<ion-icon name="arrow-forward"></ion-icon>
</button>
</div>
</ion-slide>
start.ts:
export class StartPage {
option1 = {
loop: true,
direction: 'vertical'
};
}

You need to add the options in the ion-slides component as shown in their docs.
<ion-slides [options]="option1">
<ion-slide *ngFor="let slide of slides; let last = last">
<img [src]="slide.image" class="slide-image" />
<h2 class="slide-title" [innerHTML]="slide.title" style=""></h2>
<p [innerHTML]="slide.description"></p>
<div id="skip-b">
<button (click)="dismiss()">
{{last ? "Let's Begin" : "Skip" }}
<ion-icon name="arrow-forward"></ion-icon>
</button>
</div>
</ion-slide>
</ion-slides>

In the new version of ionic we can easily achieve vertical scroll by passing [options] value to <ion-slides>.
Here is an example.
// page.ts
export class SlideClass {
slideOptions = {
direction: 'vertical',
};
constructor(){}
}
// html file
<ion-slides [options]="slideOptions">
More option we can found here more slide options

you can make your slides vertical by adding ''direction'' parameter.
<ion-slides direction="vertical">
</ion-slides>
by default slides are horizontal.

Related

How to increment and decrement a specific item in ionic

Here I am trying to increase a counter of a specific item/product on click of a plus button and decrease the counter by pressing the minus button which works absolutely fine. Now the real problem is that I want to increment/decrement for a specific item.
I tried many methods but I am still struggling.
my ts functions
addQuantity(items){
Object.keys(this.hideMe).forEach(h => {
this.hideMe[items.ITEMID] = false;
});
this.hideMe[items.ITEMID] = true;
this.item_qty+=1;
}
subQuantity(items){
if(this.item_qty-1 < 1){
this.item_qty = 1;
console.log('item_1->' + this.item_qty)
}
else{
this.item_qty -= 1;
console.log('item_2->' + this.item_qty);
}
}
html
<div class = "col-md-3 float-plus">
<ion-buttons>
<div *ngIf="!hideMe[displayItems.ITEMID]">
<button ion-button outline color = "dark" (click)="addQuantity(displayItems)">
<!-- Add -->
<ion-icon name="add"></ion-icon>
</button>
</div>
<div *ngIf="hideMe[displayItems.ITEMID]">
<div>
<div class="outline">
<button class="small-btn" ion-button outline small color = "dark" (click)="subQuantity(displayItems)">
<!-- Add -->
<ion-icon name="remove"></ion-icon>
</button>
<h5 class="count" *ngIf="val.ITEMID === displayItems.ITEMID;">
{{item_qty}}
</h5>
<ng-template #nothing>
<!-- <strong> {{cartCount}} </strong> -->
</ng-template>
<button class="small-btn" style="float: right" ion-button outline small color = "dark" (click)="addQuantity(displayItems)">
<!-- Add -->
<ion-icon name="add"></ion-icon>
</button>
</div>
</div>
</div>
</ion-buttons>
</div>
I want the counter to increment/decrement for specific items only. I have been trying for a long time please help.

How to know which button has been clicked in a *ngFor loop?

I have an ngFor which generates multiple ion-cards. Inside each card there's a button. The problem is that when I click on any of the buttons to change its text the text of other buttons also change. How can I prevent that?
<ion-card *ngFor="let item of unack, let i = index">
<ion-card-header>
<p [ngStyle]="{'color': buttonColor2}">{{status1}}</p>
</ion-card-header>
<ion-card-content>
<p align="center">Stores for order</p>
<img src="">
<div class="orderInfo">
<p>Delivery Time</p>
<p>{{item.delivery_from}} to {{item.delivery_to}}</p>
</div>
<div class="Custom">
<p>Customer</p>
<p>{{item.customer_name}} {{item.customer_surname}}</p>
</div>
</ion-card-content>
<ion-list>
<button class="Ack" *ngIf="HideACk" (click)="StartS(item)">
{{Acknowledge}}
</button>
You have to bind all attributes to object inside the unack array. example -> every object should have Acknowledge property.
<ion-content padding>
<ion-card *ngFor="let item of unack, let i = index">
<ion-card-header>
<p [ngStyle]="{'color': unack[i].buttonColor2}">{{unack[i].status1?unack[i].status1:""}}</p>
</ion-card-header>
<ion-card-content>
<p align="center">Stores for order</p>
<img src="">
<div class="orderInfo">
<p>Delivery Time</p>
<p>{{item.delivery_from}} to {{item.delivery_to}}</p>
</div>
<div class="Custom">
<p>Customer</p>
<p>{{item.customer_name}} {{item.customer_surname}}</p>
</div>
</ion-card-content>
<ion-list>
<button class="Ack" *ngIf="!unack[i]?.StartO" (click)="StartS($event, i)">
Acknowledge
</button>
<button class="Ack" *ngIf="unack[i]?.StartO" (click)="customer_pressed($event, i)">
Start Shopping
</button>
</ion-list>
</ion-card>
</ion-content>
this is your edited code Stackblits link
It should change in all because the interpolation that you are doing on Acknowledge variable is happening for all the cards. All cards are binding same Acknowledge variable, In your example, every button will consider same Acknowledge variable and value Acknowledged Order will be displayed. if you want you can create another property in item object, let say ack and assign some different text to it then render {{item.ack}}, check the following example
<ion-content padding>
<ion-card *ngFor = "let item of unack">
<button (click) = "StartS(item)" ion-button>
{{item.ack}}
</button></ion-card>
</ion-content>
Js file may look like :
export class HomePage {
public unack = [
{ name : 'apple', color : 'red', ack : 'Not acknowledged'},
{ name : 'orange', color : 'red', ack : 'Not acknowledged'},
{ name : 'penut', color : 'brown', ack : 'Not acknowledged'},
{ name : 'milk', color : 'white', ack : 'Not acknowledged'}
]
constructor(public navCtrl: NavController) {
}
StartS(item){
item.ack = item.ack == "Not acknowledge" ? "Acknowledged Order" : "Not acknowledge"
}
}

dynamically add classes to content coming from *ngFor from an array

Im not quite sure something like this is possible but say in my html component I have an ngFor like so..
<div *ngFor="let card of cards">
... stuff in here
</div>
now say I have an array of classNames like so
classNames = [
'red',
'yellow',
'blue',
'green'
]
and inside my *ngFor I have a div like so
<div *ngFor="let card of cards">
<div [class]='...'>
<div class="card">
</div>
</div>
</div>
basically what I want to happen is for every item in the ngFor give loop through the classNames array and dynamically add it to the incoming data so for example
say I have 6 items in cards so each card needs a classname so it loops through classNames and gives it a class so like this..
<div [class]='red'>
<div class="card">
</div>
</div>
<div [class]='yellow'>
<div class="card">
</div>
</div>
<div [class]='blue'>
<div class="card">
</div>
</div>
<div [class]='green'>
<div class="card">
</div>
</div>
<div [class]='red'>
<div class="card">
</div>
</div>
<div [class]='yellow'>
<div class="card">
</div>
</div>
and so on and so forth..
how could i accomplish something like this?
EDIT
component.html
<div class="card" *ngFor="let card of cards; let i = index">
<div [class]="classNames[i%classNames.length]">
....
</div>
</div>
component.ts
export class...
classNames = [
'light-green',
'dark-green',
'aqua',
'blue',
'blue-purple',
'purple',
'purple-pink',
'purple-orange'
];
You can leverage remainder (%) operator to achieve that:
<div *ngFor="let card of cards; let i = index">
<div [class]="classNames[i%classNames.length]">
<div class="card">
{{ card }}
</div>
</div>
</div>
Ng-run Example
Update:
You should define array as follows:
classNames = [
'light-green',
'dark-green',
'aqua',
'blue',
'blue-purple',
'purple',
'purple-pink',
'purple-orange'
];
Note: i use = instead of :
Instead of randomly applying any class to any card or deciding it on view based on some %, the best way, I believe would be read it from the Cards object itself, since it is logical to have all details of a card read from the card itself.
So that view is independent of those extra stuffs.
classNames = ['red','yellow','blue','green'];
cards = [{text: 1, class: this.classNames[0]},{text: 2, class: this.classNames[1]}];
your view should simply do its task (render)
<div *ngFor="let card of cards; let i = index">
<div [class]="card.class">
<div class="card">
{{ card.text}}
</div>
</div>
</div>

change the position of the ion-refresher

I'm trying to reverse the direction of the ion-refresher, but switching the position doesn't seem to work like it does on the Ion-Infinite-Scroll
<ion-refresher [position]="isReverse ? 'bottom' : 'top'" pullingIcon="arrow-dropdown" pullingText="Pull to refresh"
refreshingSpinner="circles" refreshingText="Refreshing..." (ionRefresh)="refresh($event)">
</ion-refresher>
<ion-infinite-scroll *ngIf="!isPagingComplete" (ionInfinite)="doInfinite($event)" [position]="isReverse ? 'bottom' : 'top'">
<ion-infinite-scroll-content></ion-infinite-scroll-content>
</ion-infinite-scroll>
<div *ngIf="isNotSliding">
<template *ngFor="let entity of entityList" [ngTemplateOutlet]="template" [ngOutletContext]="{entity: entity}">
</template>
</div>
<div *ngIf="!isNotSliding">
<ion-item-sliding class="page-list-sliding-item" *ngFor="let entity of entityList" #item>
<ion-item class="page-list-inner-item" (click)="config.onItemClick(entity)" >
<template [ngTemplateOutlet]="template" [ngOutletContext]="{entity: entity}"></template>
</ion-item>
<ion-item-options side="right">
<button ion-button color="danger" *ngIf="config && config.canDelete" (click)="delete(entity.id)">
<ion-icon name="trash"></ion-icon>Delete
</button>
<button ion-button color="dark" >
<ion-icon name="more"></ion-icon>More
</button>
</ion-item-options>
</ion-item-sliding>
</div>
How can I reverse the scroll on the Ion-Refresher?
The ion-refresher component is a really special one.
It will always be placed at the top of the nearest ion-content component.
There is no default option or configuration to make the reverse ion-refresher possible.

Ion-slide-box using button instead of swiping

I am trying to use a button in order to navigate through the slides however it does not work. I have done this so far:
HTML:
<ion-slide-box>
<ion-slide>
<button ng-click="slide()">Next</button>
</ion-slide>
<ion-slide>
This is the next slide
</ion-slide>
</ion-slide-box>
JS:
function controllerClass($scope, $ionicSlideBoxDelegate) {
$scope.slide = function() {
$ionicSlideBoxDelegate.next();
console.log("Click");
}
}
It shows the log "Click" but I don't know what is wrong with the slider itself.
I could really use help.
I have made a small demo for you
Plunker
HTML
<div class="button-bar">
<a ng-repeat="button in buttons" ng-class="{'active': $index === current}" ng-click="slide($index)" class="button button-stable">{{ button.name }}</a>
</div>
<ion-slide-box on-slide-changed="slideHasChanged($index)" slide-interval="1000" does-continue="true">
<ion-slide>
<div class="box" style="text-align:center;">
First slide
</div>
</ion-slide>
<ion-slide>
<ion-slide>
<div class="box" style="text-align:center;">
Second slide
</div>
</ion-slide>
</ion-slide>
</ion-slide-box>
Contoller
$scope.buttons = [{
name: '1'
}, {
name: '2'
}];
$scope.slide = function($index) {
$scope.current = $index;
$ionicSlideBoxDelegate.slide($index);
}
If you need any additional feature.Please let me know?
import { Component,ViewChild } from '#angular/core';
import { Slides } from 'ionic-angular';
#Component({ selector: 'page-calender', templateUrl: 'calender.html' })
export class CalenderPage {
#ViewChild(Slides) slides: Slides;
constructor() {}
gotoNextSlide() { this.slides.slideNext(); }
gotoPrevSlide() { this.slides.slidePrev(); }
}
Kind of a late answer, but I've been struggling with this component for a while.
You can also call the slider methods directly, when initialized, just store the slider object inside your controller and then use it:
The HTML:
<ion-slides
options="ctrl.slideOptions"
slider="ctrl.slider"
style="margin: -13px 0 0; height: 19.1em;">
<ion-slide-page
ng-repeat="b in ctrl.slideCollection"
ng-click="transCtrl.selectSlide(b)">
<!-- slide content here -->
</ion-slide-page>
<div class="swiper-button-next icon ion-chevron-right" ng-click="ctrl.slideNext($event)"></div>
<div class="swiper-button-prev icon ion-chevron-left" ng-click="ctrl.slidePrev($event)"></div>
</ion-slides>
And the JS:
ctrl.slideOptions = {
loop: true,
nextButton: '.swiper-button-next',
prevButton: '.swiper-button-prev',
pagination: false,
effect: 'coverflow',
coverflow: {
rotate: 50,
stretch: 0,
depth: 100,
modifier: 1,
slideShadows : false
}
};
$scope.$on("$ionicSlides.sliderInitialized", function(event, data){
// data.slider is the instance of Swiper
ctrl.slider = data.slider;
ctrl.activeIndex = 0;
});
$scope.$on("$ionicSlides.slideChangeStart", function(event, data){
console.log('Slide change is beginning');
});
$scope.$on("$ionicSlides.slideChangeEnd", function(event, data){
// note: the indexes are 0-based
ctrl.activeIndex = data.slider.activeIndex;
ctrl.previousIndex = data.slider.previousIndex;
});
ctrl.slideNext = function($event) {
ctrl.slider.onClickNext($event);
}
ctrl.slidePrev = function($event) {
ctrl.slider.onClickPrev($event);
}
The ng-click part is not always necessary, but if things do not work as expected it's nice to have a workaround.
I also have a tweak for the CSS buttons:
.swiper-button-next, .swiper-button-prev {
background: none;
}
Use it if you like Ionic icons better than the swiper ones (ugly blue caret...)

Categories