Need to start loop *ngFor from given array index

Question

Ionic gallery album

I can able to view all the images in grid format,if i select one among them,i need to start the ionic slide image from that..

SAMPLE CODE

<ion-slides zoom="true">
    <ion-slide *ngFor="let img of images.imageUrl>
      <div class="swiper-zoom-container">
        <img style="max-width: 95%;" [src]="img.url" (click)="downloadicon()"/>
      </div>
      <span class="icon-save notify" *ngIf="showimage" (click)="downloadImage(img.url,img.public_id)"></span>
    </ion-slide> 
  </ion-slides>

NOTE:

images.imageUrl - array which contain all images

Use Slice pipe. angular.io/api/common/SlicePipe

Yerkon
– Yerkon

2018-03-15 04:48:22 +00:00
Commented Mar 15, 2018 at 4:48 — Yerkon
– Yerkon, Commented Mar 15, 2018 at 4:48

Shantanu Mahakale · Accepted Answer · 2018-03-15 07:26:02Z

1

You can call goToSlide() on your click event-

class MyPage {
  @ViewChild(Slides) slides: Slides;

  goToSlide() {
    this.slides.slideTo(2, 500);
  }
}

answered Mar 15, 2018 at 7:26

Shantanu Mahakale

1255 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Yerkon · Accepted Answer · 2018-03-15 04:50:55Z

0

Need to start loop *ngFor from given array index

<ion-slides zoom="true">
        <ion-slide *ngFor="let img of images.imageUrl | slice:index ">
          <div class="swiper-zoom-container">
            <img style="max-width: 95%;" [src]="img.url" (click)="downloadicon()"/>
          </div>
          <span class="icon-save notify" *ngIf="showimage" (click)="downloadImage(img.url,img.public_id)"></span>
        </ion-slide> 
      </ion-slides>

answered Mar 15, 2018 at 4:50

Yerkon

4,8182 gold badges20 silver badges32 bronze badges

1 Comment

aarthi Over a year ago

Thanks for your response..i don't want to slice a array...i just want to start with given array index example: if the index is 2,i can able to swipe right and see further images. that's fine.. but if i swipe to left i need to view index 0,1 images

Jihoon Kwon · Accepted Answer · 2018-03-15 05:01:57Z

0

I would say that there are 2 options

simply you need make another array when user selects one. and just use the array in template.
when user selects one, save the index number. and add condition in ngFor like below :

I hope this would be helpfule

<ion-slide *ngFor="let img of images.imageUrl | slice:index ">

or

<ion-slide *ngFor="let img of images.imageUrl;let row = index">
        <div *ngIf="row > selectedIndex">
            ...
        </div>
    </ion-slide>

edited Mar 15, 2018 at 5:01

answered Mar 15, 2018 at 4:48

Jihoon Kwon

7555 silver badges15 bronze badges

1 Comment

aarthi Over a year ago

Thanks for your response..i don't want to slice a array...i just want to start with given array index example: if the index is 2,i can able to swipe right and see further images. that's fine.. but if i swipe to left i need to view index 0,1 images

Collectives™ on Stack Overflow

Need to start loop *ngFor from given array index

3 Answers 3

Comments

1 Comment

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related