I have implemented horizontal scrolling of cards in an angular application. The scrolling is working fine. However, I would like to the give the user also the ability to scroll left or right, by clicking the "Left" and "Right" buttons. Each button should only scroll it's own `msgCardDeck`.

Here's my code on StackBlitz:

<https://stackblitz.com/edit/angular-atnq4z>

Here's my typescript to make it scroll, but it's not working. Would appreciate if there's a way to do this.

```
// Scroll Left if there is anything to scroll
  scrollLeft() {
    document.querySelector('div.msgCard').scrollLeft -= 500;
  }

// Scroll Right if there is any area to scroll

  scrollRight() {
    document.querySelector('div.msgCard').scrollLeft += 500;
  }

```