slide to remove Ionic3 slide

Question

I am trying to create a swiping tinder like app using the Ionic slides. My slides are linked to an array in which i remove the first item once a swipe has occured:

<ion-slides pager="false" dir="{{dir}}" (ionSlideDidChange)="test()">
    <ion-slide *ngFor="let skill of skillResults;let i = index" >
      <ion-card>
        <div class="card-content">

The test method:

 import { Component, ViewChild, ViewChildren, QueryList } from '@angular/core';
import { IonicPage, NavController, NavParams, ModalController, ViewController } from 'ionic-angular';


import { Slides } from 'ionic-angular';




@IonicPage()
@Component({
  selector: 'page-main',
  templateUrl: 'main.html',
})
export class MainPage {

  @ViewChild(Slides) sliders: Slides;

     test(){
        this.skillResults.shift();
        this.sliders.update();
     }

The sliders work well and as the slide is chnaged, the test method fires correctly. However after i call the update() methods on the slides it removes all the slides and they dissapear from view.

The slide data is loaded into the slideResults array on load and everything works perfectly.

How can i get this delete function to work correctly

score -1 · Answer 1 · answered Apr 20 '18 at 13:20

-1

Rather than deleting, you could try JQuery.hide() on the elements you don't want to show. Then mark them as deleted in your database. Just an idea

answered Apr 20 '18 at 13:20

LawfulGood

177
5

Why to use JQUERY in Angular? – M Shafique Apr 20 '18 at 13:21
From the JS controller, when a slide event is detected he could hide the element. The method to the hide isn't important, it was just an example. – LawfulGood Apr 20 '18 at 13:29

slide to remove Ionic3 slide

1 Answers1