Angular PWA - osobne route na filtry/sortowanie danych

Witam.
Potrzebuje nakierowania jak ogarnąć w Angularze kwestie sortowania danych i filtrów. Pisze PWA, które będzie miało listy towarów, kontrahentów, dokumentów, które chciałbym móc odpowiednio sortować i/lub filtrować. W związku z tym, że to mobile, to nie mogę sobie tam wcisnąć jakieś grid_view i sprawa zamknięta, bo responsywność tabel jest kiepska. Zauważyłem, że mobilki często mają guziki i osobną stronę na filtry i sortowanie.

1. Czy ja jestem w stanie taki sposób obsłużyć w Angularze (www)?
2. Jak zwrócić obiekt filtra robiąc route.navigate? Jak ktoś użyje "wstecz" to obiekt będzie pusty.
3. Używając Location mogę przejść do poprzedniej strony. Wtedy odpuszczamy route.navigate ale dalej nie mam obiektu

  constructor(private location: Location) { }

  cancel() {
    this.location.back();
  }

4. Modal/Dialog wydaje się być najlepszym wyjściem. To koniecznie musiało by być fullscreen i logika tych filtrów może być zaawansowana. Nie ufam w tej kwestii dialogowym okienkom.

PS.
W przyszłości pewnie takie samo rozwiązanie będzie potrzebne do pokazania listy kontrahentów, aby wybrać odpowiedniego na dokument, analogicznie by działały towary, aby dodać pozycję.

Używam Angular Material

nie bardzo rozumiem w czym masz problem ale ja przeważnie filtry trzymam w query string w base64, czyli przy każdej zmianie filtra zapisuje sobie np json który zwraca mi getRawValue lub jeśli używasz ngModel to zapisuje sobie cały obiekt "filters". Wtedy nawet jak ktoś zrobi refresh to łatwo jest te filtry przywrócić inicializujac nasz obiekt z tym co jest w query string.

Jeśli chodzi o kwestie UI/UX to już inny temat i zależy od ilości i typu filtrów

query string odpada. Tego jest za dużo, te linki będą ogromne. Zapisywanie filtrów chce mieć po stronie serwera, nie w localstorage.

Przykładowy routing:

const routes: Routes = [
  { path: 'products', component: ProductsComponent },
  { path: 'customers', component: CustomersComponent },
  { path: 'products/filters', component: ProductsFiltersComponent },
  { path: 'customers/filters', component: CustomersFiltersComponent },
];

I teraz przechodzę z listy towarów (ProductsComponent) na listę filtrów ProductsFiltersComponent i wybieram filtry/sortowanie i zatwierdzam guzikiem, wracam do ProductsComponent i filtruje dane na podstawie tego co wybrałem w filtrowaniu. Jak zwrócić jakiś obiekt w takiej operacji do ProductsComponent? Nie mogę zapisywać filtru w trakcie jego wybierania (na onChange), bo przecież użytkownik może anulować wybór.

To gdzie zapiszę filters jest najmniej ważne. Chce takie filtrowanie i sortowanie jak Allegro ma w swojej aplikacji.
Na liście guziki "Filtruj" oraz "Sortuj"

Sortowanie - przejście na stronę, w której jest komponent z odpowiednimi filtrami

Lista filtrów - przejście na stronę, w której są odpowiednie pola do sortowania

hmm jesli chodzi i zapisywanie filtrow w be to nie wiem jaki w tym sens bardziej mialoby sens zapisywanie calej sesji z wyszukiwarki czyli "Tv max 3k" no ale nie znam aplikacji wiec nie wazne.

I teraz przechodzę z listy towarów (ProductsComponent) na listę filtrów ProductsFiltersComponent i wybieram filtry/sortowanie i zatwierdzam guzikiem, wracam do ProductsComponent i filtruje dane na podstawie tego co wybrałem w filtrowaniu. Jak zwrócić jakiś obiekt w takiej operacji do ProductsComponent? Nie mogę zapisywać filtru w trakcie jego wybierania (na onChange), bo przecież użytkownik może anulować wybór.

Ja widze 2 wyjscia (tak na szybko)
1.) robisz overlay ktory po prostu zajmuje caly viewport i komunikujesz za pomoca input/output lub 2 service Sort/Filters, czyli user kilka na "Applu filters" zamykasz overlay i zwracasz filtry w output
2.) sort/filtry dajesz jako children route i gdy one sie aktywuja to zajmuja caly viewport komunikujesz za pomoca jakies service lub jesli masz tam jakis state management to za pomoca niego