How to remember or keep current tab when page is refreshed?-CodePudding

How to we keep the current tab when a page is refreshed ? I have a component which is TransactionsDetailsComponent which renders the tabs , I want when the page is refreshed it should keep the current selected tab.

I have put my HTML and TS code below if someone is interested.

Any idea how to made this possible in angular ? thanks.

#html code

<div headerTabs>
            <div style="margin-top: -49px;">
                <mat-tab-group animationDuration="0ms" [(selectedIndex)]="transactionTabIndex"
                    (selectedTabChange)="setTransactionTabIndex($event)">
                    <mat-tab label="{{tab}}" *ngFor="let tab of tabs">
                        <ng-template matTabContent>
                            <div class="mat-tab-shadow-container">
                                <div class="mat-tab-shadow"></div>
                            </div>
                            <div class="tab-content">
                                <app-transaction-overview *ngIf="tab === 'Overview' && transaction != null" [transaction]="transaction"
                                    (teamAndUsers)="teamAndUsersEvent($event)" #transactionOverView
                                    (saveTransactionEvent)="saveTransactionEvent($event)"></app-transaction-overview>
                                <app-deals-transaction *ngIf="tab === 'Deals' && transaction != null" [transaction]="transaction">
                                </app-deals-transaction>
                                <app-transaction-activity *ngIf="tab === 'Activity' && transaction != null" [transactionId]="transactionId" [isLocked]="transaction.isLocked">
                                </app-transaction-activity>
                                <app-document-management-list #DocumentManagementList *ngIf="tab === 'Documents' && transaction != null"
                                    [dto]="transaction" [documentType]="documentType" [isLocked]="transaction.isLocked"></app-document-management-list>
                            </div>
                        </ng-template>
                    </mat-tab>
                </mat-tab-group>
            </div>
        </div>
    </app-page-header>
</div>

#tscode

export class TransactionsDetailsComponent implements OnInit {
  documentType = EnumDocumentManagementType.TRANSACTION;
  selectedIndex = 0;
  transactionId: number;
  propertyId: string;
  @ViewChild('transactionOverView') transactionOverView: any;
  isInProgress = false;
  isEdit = false;
  accountId: number;
  accountRole: string;
  tabs = ['Overview', 'Documents', 'Deals', 'Activity'];
  transaction: any = null;
  partialTransaction: any = null;
  transactionTabIndex: number = 0;
  /*page header component Inputs*/
  // pageHeaderTitleData = {
  //   title: {
  //     primary: null
  //   }
  // }

  pageHeaderTitleData = {
    title: {
      main: "",
      sub: ""
    },
    status: {
      text: 'in progress',
    },
    otherInfo: []
  }

  breadCrumbsData = {
    paths: [
      {
        text: "My Transactions",
        link: "/transactions"
      }
    ],
    currentPage: ''
  }

  constructor(
    private _notificationService: NotificationService,
    private formBuilder: FormBuilder,
    private _activatedRoute: ActivatedRoute,
    private _transactionService: TransactionsService,



  ngOnInit(): void {
    this._activatedRoute.queryParams
      .subscribe(
        params => {
          if (params.tab) {
            this.transactionTabIndex = params.tab;
          }
        }
      )
  }  


  setTransactionTabIndex(e: any) {
    this.setIsEdit(false);
    this.transactionTabIndex = e.index;    
  }

}

CodePudding user response：

You can use localStorage for this purpose, it will persist across multiple sessions until the localStorage is cleared.

Change setTransactionTabIndex to store the selection to localStorage

setTransactionTabIndex(e: any) {
    this.setIsEdit(false);
    this.transactionTabIndex = e.index;
    localStorage.setItem('transactionTabIndex', e.index);
  }

and then in the ngOnInit, check if you have transactionTabIndex set in localStorage and set it:

ngOnInit(): void {
    this._activatedRoute.queryParams
      .subscribe(
        params => {
          if (params.tab) {
            this.transactionTabIndex = params.tab;
          }
        }
      );
      this.transactionTabIndex =  localStorage.getItem('transactionTabIndex') || 0
  }