how to move div scroll position based on button click in angular 2

Question

in app.component.html file i have one div element with horizontal scroll and two buttons as Next and Previous. based on these button click i want to move scroll.

Answer 1

This is how you scroll the div element - https://plnkr.co/edit/2v0iVgkOZfISqlFAkrNX?p=preview

example:

import { Component, ViewChild, ElementRef } from '@angular/core';
@Component({
  selector: 'my-app',
  template: `
    

      

    
    Previous
    Next
  `
})
export class AppComponent { 
  public arr = ['foo', 'bar', 'baz'];
  @ViewChild('panel', { read: ElementRef }) public panel: ElementRef;

  public onPreviousSearchPosition(): void {
    this.panel.nativeElement.scrollTop -= 20;
  }

  public onNextSearchPosition(): void {
    this.panel.nativeElement.scrollTop += 20;
  }
}