Angular navigate back without reloading the page

The problem is, that your filter-page component gets destroyed on navigate, and therefore the component state will be lost. You have serveral options to maintain the filter state.

• Use localstorage API to serialize and later retrieve the filterstate
• Use a state management framework like ngrx or ngxs
• Use a service to keep the filter state
• Pass the state via activatedRoute

I would suggest to either use the localStorage API to save the state in a serialized way to the browser and retrieve it back on fiter-page init or saving the state of the filter into a service and request the state from there.

Here's a very basic example for the localStorage. (Not sure if the code is perfectly valid, but you should get the idea..)

export class FilterPage implements OnInit, OnDestroy {

  private filterItems: string[];

  constructor() { }

  ngOnInit() {
    if (localStorage.getItem('filterItems'))
      this.filterItems = JSON.parse(localStorage.getItem('filterItems'));
    } else {
      this.filterItems = [];
    }
  }
  
  ngOnDestroy() {
    if(this.filterItems.length > 0) {
      localStorage.setItem('filterItems', JSON.stringify(this.filterItems));
    }
  }
  
  addFilterItem(item: string) {
    if (!this.filterItems.includes(item)) {
      this.filterItems = [...this.filterItems, item];
    }
  }
  
  removeFilterItem(item: string) {
    if (this.filterItems.includes(item)) {
      this.filterItems = this.fiterItems.filter(currentItem => currentItem !== item);
    }
  }
}

I was searching for this, and got the solution, so posting it for others.

We can make use of Angular Route Reuse Strategy.

check the below links

https://medium.com/javascript-in-plain-english/angular-route-reuse-strategy-b5d40adce841#:~:text=When%20navigating%20away%20from%20a,user%2F57%20for%20example)

https://medium.com/@rajeshpillai1996/what-is-routereusestrategy-how-to-cache-components-with-angular-routereusestrategy-82da7790cd2b

Navigating from one route to another route will always destroy current component and reload next component. In this case you render detail page from current component only by ngIf . I mean show and hide both template based on search. You will not need to change route, but that’s not a preferred solution.

However I would prefer to save data in common service and use the routing strategy.