How can i keep selected tab on page refresh in angular..?

Question

I have two tabs, one is cluster list and template list. after I edited something in the template list, I wanted to come back to same selected template list. But its going to the cluster list. I tried with this line, But after updating template list its taking me to the cluster list. Appreciate your help on this.

Answer 1

You can set data into route after updating form and coming back to list using History API . If your angular version >=7.2 You can save data in state.

Or else you can use below approach of saving data into localStorage/ sessionStorage

After saving/Updating data you can call this method before redirecting back to item listing page

 saveTabState(){
    const route = window.location.href;
    if(route.includes('templateform'))
    {
      localStorage.setItem('activeTabTemplate','true');
    }
    
  }

In item listing page

if(localStorage.getItem('activeTabTemplate')){
      this.activeTabTemplate = true;
      localStorage.removeItem('activeTabTemplate')
    }

In template

// for tab1:
[ngClass]="!activeTabTemplate ? 'active' : ''"

// tab2:
[ngClass]="activeTabTemplate ? 'active' : ''"