Как изменить раздел заголовка при прокрутке в Angular?

HostListener не следует помещать в класс компонента, он должен быть внутри методов класса

Эта часть неверна

@HostListener('window:scroll', [])
export class SidenavPositionExample {

Ваш класс компонента должен быть таким

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'],
})
export class SidenavPositionExample {
  scrolled: boolean = false;

  // for initialization
  constructor() {
    this.scrolled = window.pageYOffset > 48;
  }


  @HostListener('window:scroll', [])
  onWindowScroll() {
    this.scrolled = window.pageYOffset > 48;
  }
}

Ваше решение отображает только header-2, когда пользователь прокручивает вниз дальше, чем заданное значение, но не будет снова показывать header-1, как только пользователь прокручивает вверх, как на опубликованной вами демонстрационной странице. Заголовок 1 появляется снова, только если пользователь прокручивает обратно вверх.

Чтобы вставить header-1 обратно, как только пользователь прокручивает вверх, вы должны определить текущее направление прокрутки всякий раз, когда запускается событие прокрутки. Для этого вы можете создать наблюдаемый поток позиций прокрутки, сопоставить их направлениям ВВЕРХ / ВНИЗ и соответствующим образом установить состояние заголовка. Затем используйте анимацию для вставки и вывода заголовков в зависимости от наблюдаемого состояния заголовка.

https://stackblitz.com/edit/angular-pj5rjj-8asowc

import { Component, HostListener, AfterViewInit, OnDestroy } from '@angular/core';
import { fromEvent, Subject } from 'rxjs';
import { distinctUntilChanged, map, pairwise, takeUntil, throttleTime } from 'rxjs/operators';
import { animate, state, style, transition, trigger } from '@angular/animations';

export enum VisibilityState { Visible = 'visible', Hidden = 'hidden' }  
export enum Direction { None = 'None', Up = 'Up', Down = 'Down' }

@Component({
  selector: 'sidenav-position-example',
  templateUrl: 'sidenav-position-example.html',
  styleUrls: ['sidenav-position-example.css'],
  animations: [
    trigger('scrollAnimation', [
      state(VisibilityState.Visible, style({ transform: 'translateY(0)' })),
      state(VisibilityState.Hidden, style({ transform: 'translateY(-64px)' })), // adjust this to the height of your header
      transition(`${VisibilityState.Visible} => ${VisibilityState.Hidden}`, animate('250ms')),
      transition(`${VisibilityState.Hidden} => ${VisibilityState.Visible}`, animate('250ms'))
    ])
  ]
})
export class SidenavPositionExample implements AfterViewInit, OnDestroy {
  private destroy$: Subject<boolean> = new Subject<boolean>();
  isHeader1Visible = VisibilityState.Visible;
  isHeader2Visible = VisibilityState.Hidden;
  slideHeader2InAtPosition = 30;

  ngAfterViewInit() {
    // create an observable stream of scroll positions and map them to UP / DOWN directions
    const content = document.querySelector('.scrollWrapper');
    // if the scroll events happen on your window you could use 'window' instead of 
    // 'content' here
    const scroll$ = fromEvent(content, 'scroll').pipe(
      throttleTime(10),
      // if you used 'window' above replace 'content.scrollTop' with 'window.pageYOffset'
      map(() => content.scrollTop),
      pairwise(),
      map(([y1, y2]): Direction => (y2 < y1 ? Direction.Up : (y2 > this.slideHeader2InAtPosition ? Direction.Down : Direction.None))),
      distinctUntilChanged(),
      takeUntil(this.destroy$)
    );

    // subscribe to the UP / DOWN scroll direction stream and set the header state accordingly
    scroll$.subscribe(dir => {
      if (dir === Direction.Down) { // scrolling down
        this.isHeader1Visible = VisibilityState.Hidden;
        this.isHeader2Visible = VisibilityState.Visible;
      } else { // scrolling up
        this.isHeader1Visible = VisibilityState.Visible;
        this.isHeader2Visible = VisibilityState.Hidden;
      }
    });
  }

  ngOnDestroy() {
    this.destroy$.next(true);
    this.destroy$.unsubscribe();
  }

}

Я немного изменил HTML, но вы также можете использовать другую настройку, а затем установить элемент, который будет соответственно прокручиваться в приведенном выше коде, или просто прослушивать события прокрутки на window.

<div class = "headerWrapper">
  <mat-toolbar class = "header" color = "primary" [@scrollAnimation] = "isHeader1Visible">
    <mat-toolbar-row>
      <span>Header 1</span>
    </mat-toolbar-row>
  </mat-toolbar>

  <mat-toolbar class = "header" color = "secondary" [@scrollAnimation] = "isHeader2Visible">
    <mat-toolbar-row>
      <span>Header 2</span>
    </mat-toolbar-row>
  </mat-toolbar>
</div>
<div class = "scrollWrapper">
  <div class = "scrollContent">
  ...
  </div>
</div>