0

I want to use horizontal scroll with left and right arrows with dynamically hide and show functionality. Horizontal scroll (with arrows) for Angular package This thread here answers it but without dynamic hide/show of arrows. Please reply if someone has idea about it. Thanks.

Here is the code below: .html

  <div class="custom-slider-arrow mt-sm">
    <img src="assets/img/chevron-left.svg" alt="" (click)="scrollLeft()">
  </div> 
    <div #widgetsContent class="custom-slider-main">
        <ng-container *ngFor="let object of statusList">
            <status-card ></status-card>
        </ng-container>
    </div>
    <div class="custom-slider-arrow mt-sm">
      <img src="assets/img/chevron-right.svg" alt="" (click)="scrollRight()">
      </div>

</div>

And .ts file has this code.

@ViewChild('widgetsContent',{static:false}) widgetsContent: ElementRef;

scrollLeft(){
  this.widgetsContent.nativeElement.scrollLeft -= 300;
}

scrollRight(){
  this.widgetsContent.nativeElement.scrollLeft += 300;
}

.scss file contains

.custom-slider-main{
    display: flex;
    overflow: hidden;    
    scroll-behavior: smooth;
}

.custom-slider-arrow{
    display: flex;
    align-items: center;
    img{
        width: 48px;
        height: 48px;
    }
}
Devender Chaudhary
  • 1
  • 1
  • 2

1 Answers1

0

1) .ts file

import { Component, OnInit, ViewChild, ElementRef } from '@angular/core';

export class Scroll implements OnInit {
  @ViewChild('scrollMenu') scrollMenu: ElementRef;
  rightDisabled: boolean = false;
  leftDisabled: boolean = true;
  constructor(){}

  scrollLeft(){
    this.scrollMenu.nativeElement.scrollLeft -= 150;
    this.checkScroll()
  }

  scrollRight(){
    this.scrollMenu.nativeElement.scrollLeft += 150;
        this.checkScroll();
  }
  
  onScroll(e){
      this.checkScroll();
  }

  checkScroll(){
    this.scrollMenu.nativeElement.scrollLeft==0? this.leftDisabled = true :this.leftDisabled = false;

    let newScrollLeft = this.scrollMenu.nativeElement.scrollLeft;
    let width = this.scrollMenu.nativeElement.clientWidth;
    let scrollWidth = this.scrollMenu.nativeElement.scrollWidth;
    scrollWidth - (newScrollLeft+width)==0? this.rightDisabled = true :this.rightDisabled = false;
  }

}

2) .html file

  <ion-row>
<div class="pull-left mt-sm" (click)="scrollLeft()" [ngClass]="this.leftDisabled ? 'visibility':''"> 
  <ion-icon name="chevron-back-outline" style="font-size: 24px;" ></ion-icon>
</div>
<div class="scroll" scrollX="true" #scrollMenu (scroll)="onScroll($event)" [ngClass]="this.rightDisabled ? 'width':this.leftDisabled?'width':''">
  <div *ngFor="let data of yourDataArray">
        {{data.someData}}
  </div>
</div>
<div class="pull-right" (click)="scrollRight()" [ngClass]="this.rightDisabled ? 'visibility':''">
  <ion-icon name="chevron-forward" style="font-size: 24px;" ></ion-icon>
</div></ion-row>

3) .scss file

.scroll {
    overflow: auto;
    scroll-behavior: smooth;
    width: 80%; 
    background: var(--ion-primary-bg);
}

.pull-right{
    background: grey;
    display: flex;
    align-items: center;
    width: 10%;
    justify-content: space-around;
}

.visibility{
    display: none !important;

}

.pull-left{
    background: grey;
    display: flex;
    align-items: center;
    width: 10%;
    justify-content: space-around;
}

.width{
    width:90% !important;
}
Sagar
  • 198
  • 2
  • 11