Horizontal Scroll (With Arrows) for Angular Package

Horizontal Scroll using buttons on angular2

Import ViewChild and ElementRef to get elemenet refrence.

use #localvariable as shown here, <div #widgetsContent class="middle">

get element in component, @ViewChild('widgetsContent', { read: ElementRef }) public widgetsContent: ElementRef<any>;

change scrollvalue, this.widgetsContent.nativeElement.scrollTo({ left: (this.widgetsContent.nativeElement.scrollLeft + 150), behavior: 'smooth' });

An example is shown below

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

@Component({
    selector: 'my-app',
    template: `
                <div class="container">
                <div style="float: left">
                    <button (click)="scrollLeft()">left</button>
                </div>

                <div #widgetsContent class="middle">
                    <div class="info-widget">
                    WIDGET
                    </div>
                    <div class="info-widget">
                    WIDGET
                    </div>
                    <div class="info-widget">
                    WIDGET
                    </div>
                    <div class="info-widget">
                    WIDGET
                    </div>
                    <div class="info-widget">
                    WIDGET
                    </div>
                    <div class="info-widget">
                    WIDGET
                    </div>
                </div>

                <div style="float: right">
                    <button (click)="scrollRight()">right</button>
                </div>
                </div>
            `,
    styles: [`
      .info-widget {
        width: 31.75%;
        border: 1px solid black;
        display: inline-block;
      }

      .middle {
        float: left;
        width: 90%;
        overflow: auto;
        /*will change this to hidden later to deny scolling to user*/
        white-space: nowrap;
      }
            `]
})

export class AppComponent { 

  @ViewChild('widgetsContent', { read: ElementRef }) public widgetsContent: ElementRef<any>;

  public scrollRight(): void {
    this.widgetsContent.nativeElement.scrollTo({ left: (this.widgetsContent.nativeElement.scrollLeft + 150), behavior: 'smooth' });
  }

  public scrollLeft(): void {
    this.widgetsContent.nativeElement.scrollTo({ left: (this.widgetsContent.nativeElement.scrollLeft - 150), behavior: 'smooth' });
  }
}

Angular 5 - Horizontal scrolling using buttons

Try this solution.

pass event object as argument to the function.

// necessary changes for ts.
 scrollLeft(e) {
    let wrapper = e.srcElement.closest('.msgCardScrollWrapper');
    wrapper.querySelector('.msgCardDeck').scrollLeft -= 500;
 }

 scrollRight(e) {
    let wrapper = e.srcElement.closest('.msgCardScrollWrapper');
    wrapper.querySelector('.msgCardDeck').scrollLeft += 500;
 }
 // necessary changes for html.
 <div class="msgCardNavRightButton" (click) = "scrollRight($event)">
    <button class="btn btn-primary">Right</button>
  </div>

 <div class="msgCardNavLeftButton" (click) = "scrollLeft($event)">
    <button class="btn btn-primary">Left</button>
 </div>

Horizontal scroll for angular ng-table

When the size of the content inside a block level container exceeds the overall size of the container then naturally a horizontal scroll should be displayed.

As you want the ng-table to be scrollable horizontally within the div element, set a width for the div containing the ng-table and also the overflow-x:scroll on the div.

    <div style="width:100px;overflow-x:scroll;">     <table>      <tr>       <td>Col 1</td>       <td>Col 2</td>       <td>Col 3</td>       <td>Col 4</td>       <td>Col 5</td>       <td>Col 6</td>      </tr>     </table>    </div>

On click scroll div horizontally in angular 6

What you're looking for is a carousel... which has arrows for the scrolling effect that you're aiming for:

relevant HTML:

<div class='containerDiv'>
    <carousel [itemsPerSlide]="itemsPerSlide" [singleSlideOffset]="singleSlideOffset" [showIndicators]="false" [noWrap]="!noWrap"
     [interval]="false" [startFromIndex]="0" (slideRangeChange)="onSlideRangeChange($event)">
        <slide *ngFor="let slide of slides; let index=index">
            <img [src]="slide.image" alt="image slide" style="display: block; width: 100%;">
    <div class="carousel-caption">
      <p>some optional text {{index}}</p>
    </div>
  </slide>
</carousel>
</div>

relevant TS:

import { Component } from '@angular/core';

@Component({
  selector: 'demo-carousel-multilist',
  templateUrl: './multilist.html',
  styles: [`
  ::ng-deep a.carousel-control-prev, a.carousel-control-prev:hover {left:-7% !important;}
  ::ng-deep .carousel-control-next, .carousel-control-next:hover {right:-8% !important;}
  slide{margin:5px;}
  .carousel-caption{position:relative; text-align: center; padding: 15px 0 0 0; bottom: 0;}
  `]
})
export class DemoCarouselMultilistComponent {
  itemsPerSlide = 4;
  singleSlideOffset = false;
  noWrap = false;

  slidesChangeMessage = '';

  slides = [
    {image: 'https://valor-software.com/ngx-bootstrap/assets/images/nature/1.jpg'},
    {image: 'https://valor-software.com/ngx-bootstrap/assets/images/nature/2.jpg'},
    {image: 'https://valor-software.com/ngx-bootstrap/assets/images/nature/3.jpg'},
    {image: 'https://valor-software.com/ngx-bootstrap/assets/images/nature/4.jpg'},
    {image: 'https://valor-software.com/ngx-bootstrap/assets/images/nature/5.jpg'},
    {image: 'https://valor-software.com/ngx-bootstrap/assets/images/nature/6.jpg'},
    {image: 'https://valor-software.com/ngx-bootstrap/assets/images/nature/7.jpg'},
    {image: 'https://valor-software.com/ngx-bootstrap/assets/images/nature/8.jpg'},
    {image: 'https://valor-software.com/ngx-bootstrap/assets/images/nature/1.jpg'},
    {image: 'https://valor-software.com/ngx-bootstrap/assets/images/nature/2.jpg'}
  ];

  onSlideRangeChange(indexes: number[]): void {
    this.slidesChangeMessage = `Slides have been switched: ${indexes}`;
  }
}

complete working stackblitz here

---

Related Topics