title: How to change Header section on scrolling in Angular?
body: <p>I want to change header section while scrolling horizontal sidebar in angular.
  By using the hostlister I have implemented this but it's not working as intended. </p>
  
  <p><strong>code in example.ts file</strong></p>
  
  <pre><code>import {Component,HostListener} from '@angular/core';
  
  /** @title Implicit main content with two sidenavs */
  @Component({
    selector: 'sidenav-position-example',
    templateUrl: 'sidenav-position-example.html',
    styleUrls: ['sidenav-position-example.css'],
  })
  @HostListener('window:scroll', [])
  export class SidenavPositionExample {
  scrolled : boolean =  true;
  onWindowScroll() {
      this.scrolled = window.pageYOffset &gt;48;
      }
  }
  </code></pre>
  
  <p><strong>html code</strong></p>
  
  <pre><code>&lt;div style="min-height: 150vh;"&gt; &lt;!-- Set minimum height to force a scrollbar --&gt;
      &lt;mat-toolbar color="primary"&gt;
          &lt;mat-toolbar-row&gt;
              &lt;span&gt;Header 1&lt;/span&gt;
          &lt;/mat-toolbar-row&gt;
      &lt;/mat-toolbar&gt;
  
      &lt;mat-toolbar color="secondary" style="position: fixed; top: 0;" *ngIf="scrolled"&gt;
          &lt;mat-toolbar-row&gt;
              &lt;span&gt;Header 2&lt;/span&gt;
          &lt;/mat-toolbar-row&gt;
      &lt;/mat-toolbar&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p><a href="https://stackblitz.com/edit/angular-pj5rjj?file=app%2Fsidenav-position-example.ts" rel="nofollow noreferrer">A Stackblitz of what I tried</a></p>
  
  <p><a href="https://xrv5pw.axshare.com/#id=yrdg9w&amp;p=home&amp;c=1" rel="nofollow noreferrer">A demo of what I want</a></p>