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' });
}
}
Consider the following solution
In .html
<div #widgetsContent class="custom-slider-main">
<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>
In .scss
.custom-slider-main{
display: flex;
overflow: hidden;
scroll-behavior: smooth;
}
In .ts
@ViewChild('widgetsContent') widgetsContent: ElementRef;
And On click of left/right button use the following functions
scrollLeft(){
this.widgetsContent.nativeElement.scrollLeft -= 150;
}
scrollRight(){
this.widgetsContent.nativeElement.scrollLeft += 150;
}