title: Scroll buttons in angular application
body: <p>[Sorry for my bad English]</p>
  
  <p>I have to create scrollable view, with scroll buttons, like this picture:</p>
  
  <p><img src="https://i.stack.imgur.com/E280I.png" width="500"></p>
  
  <h3>Spec:</h3>
  
  <ul>
  <li>When the list is <code>overflow</code>, then show right/left buttons.</li>
  <li>When there is not overflow, hide the scroll buttons.</li>
  <li>When the <code>scrollLeft === 0</code> then disable the left button. and also, when the <code>scrollLeft</code> value is max, then disable the right button.</li>
  </ul>
  
  <h3>This is my try:</h3>
  
  Template:
  
  <pre class="lang-html prettyprint-override"><code>&lt;section class="list-with-scroll"&gt;
  
      &lt;div class="list" #list&gt;
          &lt;div *ngFor="let i of items" class="item"&gt;{{i}}&lt;/div&gt;
      &lt;/div&gt;
  
      &lt;button class="scroller" *ngIf="isOverflown(list)" [class.disable]="!canScrollStart(list)" (click)="scroll(list,-1)" id="scroll-left"&gt;&amp;#8678;&lt;/button&gt;
  
      &lt;button class="scroller" *ngIf="isOverflown(list)" [class.disable]="!canScrollEnd(list)" (click)="scroll(list,1)"&gt;&amp;#8680;&lt;/button&gt;
  &lt;/section&gt;
  
  </code></pre>
  
  Component:
  
  <pre><code>
  export class AppComponent {
    items = ["Item 1", "Item 2", "Item 3", "Item 4", "Item 5"];
  
    isOverflown(element: HTMLElement) {
      return element.scrollWidth &gt; element.clientWidth;
    }
  
    scroll(element: HTMLElement, direction: number) {
      element.scrollLeft += 100 * direction;
    }
  
    canScrollStart(element: HTMLElement) {
      return element.scrollLeft &gt; 0;
    }
  
    canScrollEnd(element: HTMLElement) {
      return element.scrollLeft &lt; element.scrollWidth;
    }
  }
  
  </code></pre>
  
  CSS:
  
  <pre class="lang-css prettyprint-override"><code>/* The rest of css see on staclblitz */
  
  #scroll-left{
    order: -1; /* To pevent ExpressionChangedAfterItHasBeenCheckedError */
  }
  </code></pre>
  
  <p>StackBlitz: <a href="https://stackblitz.com/edit/my-angular-scroll" rel="nofollow noreferrer">https://stackblitz.com/edit/my-angular-scroll</a></p>
  
  <h3>The help I need:</h3>
  
  <ul>
  <li>I feel that my solution is very ugly.</li>
  <li>When whe window/viewport resized, it doesn't update the state of buttons. I can listen to all events, but i don't know hou what is the best way do to it.</li>
  <li><s>I don't know how to disable the right button when the <code>scrollLeft</code> value is max.</s> Resolved. Thanks to @Void Spirit</li>
  </ul>
  
  <p>Thenk you for any help.</p>