from-query-params.ts

import { fromEvent, map, Observable, startWith } from 'rxjs';

export function fromQueryParams(): Observable<Record<string, string>> {
  return fromEvent(window, 'popstate').pipe(
    startWith(null),
    map(() => {
      const searchParams = new URLSearchParams(window.location.search);
      const params: Record<string, string> = {};

      for (const [key, value] of searchParams.entries()) {
        params[key] = value;
      }

      return params;
    })
  );
}

native-query-params.directive.ts

import { Directive, Input } from '@angular/core';

@Directive({
  selector: '[nativeQueryParams]',
  host: {
    '(click)': 'updateParams()',
    '(keydown.enter)': 'updateParams()',
    '(keydown.space)': 'updateParams()',
  },
})
export class NativeQueryParamsDirective {
  @Input('nativeQueryParams') params: Record<string, string>;

  updateParams(): void {
    if (!this.params) {
      return;
    }

    const searchParams = new URLSearchParams(window.location.search);

    for (const [key, value] of Object.entries(this.params)) {
      searchParams.set(key, value);
    }

    const url = `${window.location.protocol}//${window.location.host}${
      window.location.pathname
    }?${searchParams.toString()}`;

    window.history.pushState({ path: url }, '', url);
    window.dispatchEvent(new Event('popstate'));
  }
}