How would you save UI state in angular / angular material?

Question

When the user clicks on the browser back button I would like to set the UI state of the Material Expansion Panel / Accordion, Material Tabs.

To note: I do not want to implement redux or ngrx/store.

For an example use case:

On the current page I have collapsed the second expansion panel then navigated to the fourth tab. If i were to click away from that page and then click back, I would like those particular components to be in the UI state i left them in.

From that point every time I click back or forward to a point, if those components are present to set the UI state as it was.

I know the Material Expansion Panel and Material Tabs API allows you to set the collapsed panel/s or the active tabs, this question is how you would you remember the state when navigating back and forwards to set those properties.

Would you use a service? Would I use the router and set query parameters?

Any advice how you have solved this issue would be a great help.

Thanks in advance.

Answer 1

You can easily save last state while navigating within your application, by using services. When you navigate away from your page where tabs and accordions present you can save state on OnDestroy hook. and similarly you can restore the state on OnInit hook when you navigate in to your ui component. What i would do is to create a global service that holds that state;

import { Injectable } from '@angular/core';

@Injectable({providedIn: "root"})
export class UIStateService {
  private state: UIState;

  constructor() {}

  setState(state: UIState) {
    this.state = state;
  }

  getState(): UIState {
    return this.state ? this.state : {tabState: 1, acordionState: 1} /** default state*/;
  }
}

export interface UIState {
  tabState: number;
  acordionState: number;
}

and in my ui component:

import { Component, OnInit, OnDestroy } from '@angular/core';
import { UIStateService } from "./uistate.service"

@Component({
  selector: 'app-my-ui',
  templateUrl: './my-ui.component.html',
  styleUrls: ['./my-ui.component.css']
})
export class MyUIComponent implements OnInit, OnDestroy {

  constructor(private uiStateService: UIStateService) { }

  ngOnInit() {
    const state = this.uiStateService.getState();
    this.setTabState(state.tabState);
    this.setAcordionState(state.acordionState);
  }

  setTabState(tabId: number) {
    // set active tab based on id tabId
  }

  setAcordionState(acordionId: number) {
    // set active panel based on acordionId
  }

  getCurrentTabState(): number {
    // return active tabid i.e 1
    return 1;
  }

  getCurrentAcordionState(): number {
    // return active acordionId i.e 1
    return 1;
  }

  ngOnDestroy() {
    const currentState = { tabState: this.getCurrentTabState(), acordionState: this.getCurrentAcordionState() }
    this.uiStateService.setState(currentState);
  }
}

as long as your page doesn't refresh state persists in UIStateService. However, if you want to persist state between page reloads you should revise the UIStateService to store the state in LocalStorage of browser.