title: How to change angular material toolbar background-color to white after scrolling and transparent in start?
body: <p>I am trying change the background color of toolbar to white on scroll using angular material.</p>
  <pre class="lang-html prettyprint-override"><code>&lt;mat-toolbar class=&quot;main-container&quot; color=&quot;primary&quot;&gt;
   &lt;div fxHide.gt-sm&gt;
    &lt;button mat-icon-button (click)=&quot;onToggleSidenav()&quot;&gt;
      &lt;mat-icon class=&quot;menu-toggle&quot;&gt;menu&lt;/mat-icon&gt;
    &lt;/button&gt;
   &lt;/div&gt;
   &lt;div class=&quot;logo-area&quot;&gt;
    &lt;a routerLink=&quot;/&quot;&gt;&lt;img class=&quot;logo&quot; src=&quot;assets/images/logo/logo-main.svg&quot; alt=&quot;&quot;&gt;&lt;/a&gt;
   &lt;/div&gt;
  &lt;/mat-toolbar&gt;
  </code></pre>