Ricordare la posizione della pagina in Angular

Praticamente devo ricorda l'altezza della pagina in cui era l'utente, in modo da andare a quell'altezza nel caso in cui l'utente cambi pagine e poi ritorni li.

In Angular possiamo fare tutto questo usando un service apposito.

Nel service andiamo a memorizzare l'altezza nel localStorage (o nel sessionStorage se volete), e poi la riprendiamo quando ci torniamo.

Questo il service:

import {Injectable} from '@angular/core';

@Injectable({providedIn: 'root'})
export class ScrollPositionService {

  savePosition(path: string, y: number) {
    localStorage.setItem(path, y.toString());
  }

  getPosition(path: string): number | null {
    const value = localStorage.getItem(path);
    return value ? parseInt(value, 10) : null;
  }

  clearPosition(path: string) {
    localStorage.removeItem(path);
  }
}

Il clearPosition non lo userò, ma comunque è previsto.

Adesso il componente, di cui vi riporto solo l'essenziale:

// ALTRI IMPORT
import {ScrollPositionService} from "../../_services/scroll-position.service";

@Component({
  selector: 'app-progetti',
  standalone: true,
  templateUrl: './progetti.component.html',
  imports: [
	..................
  ],
  styleUrl: './progetti.component.scss'
})

export class ProgettiComponent implements OnInit, AfterViewInit, OnDestroy {
  loading: boolean = true;

  constructor(
      private scrollPositionService: ScrollPositionService
  ) {
  }

  ngOnInit(): void {
    this.getData();
  }

  ngAfterViewInit() {
    setTimeout(() => {
      this.scrollPrevious();
    }, 1000);
  }

  ngOnDestroy() {
    this.scrollPositionService.savePosition(this.path, window.scrollY);
  }

  scrollPrevious(): void {
    const pos = this.scrollPositionService.getPosition(this.path);
    if (pos !== null) {
      window.scrollTo(0, pos);
    }
  }

  // SCROLL
  @HostListener('window:scroll', [])
  onWindowScroll() {
    this.scrollPositionService.savePosition(this.path, window.scrollY);
  }

  getData(): void {
    this.progettiService.get()
        .subscribe((res) => {
          // DO STUFF

          setTimeout(() => {
            this.scrollPrevious();
          }, 1000);

          this.loading = false;
        });
  }

}

Enjoy!