keep selected tab Active when page reloads in angular 2

Question

<nav class="nav-sidebar">
    <ul class="nav tabs" id="myTab">
      <li class="active" ><a  href="#tab3" data-toggle="tab" >Tabl 1</a> </li>                               
      <li class="tab2"><a href="#tab2" data-toggle="tab">Tab 2</a></li>
      <li ><a href="#tab3" data-toggle="tab">Tab 3</a></li>
      <li ><a href="#tab4" data-toggle="tab">Tab 4</a></li>
      <li><a href="#tab5" data-toggle="tab">Tab 5</a></li>
    </ul>
</nav>

1. I have used Some stackoverflow codes like given below and got the error Property 'tab' does not exist on type 'JQuery'

In My .ts added below code on ngOnInit()

https://stackoverflow.com/a/21494906/9266349

Answer 1

Try and store your active tab value in local or session storage and set it on oninit like below.

 ngOnInit() {
    if (sessionStorage.getItem("activeTab")) {
      youractivetbavariable = sessionStorage.getItem("activeTab");
    }
      }
@HostListener('window:beforeunload', ['$event'])
      unloadNotification($event: any) {
        sessionStorage.setItem("activeTab", this.getUser());
      }