Maintain the active tab selection in Angular 2 even after the page reloads

<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. Utilizing code snippets from forums like the one below resulted in the error message "Property 'tab' does not exist on type 'JQuery'".

The following code was added to my .ts file within the ngOnInit() function.

angulartypescript

Answer №1

Consider saving the value of your current tab in either local or session storage and then setting it during initialization as shown below.

 ngOnInit() {
    if (sessionStorage.getItem("activeTab")) {
      yourActiveTabVariable = sessionStorage.getItem("activeTab");
    }
}

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

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Angular Interceptor failing to assign headers in HTTP requests

Although I am successfully setting the authToken value from my login component with a valid token (verified using Postman), the issue arises when no Authorization parameter is being added to my request header. entryComponents: [ ConfirmDialogTarget ...

angularangular-http-interceptorsangular-httpclient

What methods can be used to check for incorrect type of a function argument in ts-jest?

I have been experimenting with a TypeScript function lately. To speed up my testing process, I decided to utilize ts-jest. However, I stumbled upon an issue that seems tricky to resolve. Despite exploring various ts-jest options, I couldn't find a so ...

typescript

How can I avoid transpiling in TypeScript when setting ESNext as the target in tsconfig.json?

I came across a similar question that I thought would be helpful: How to maintain ES6 syntax when transpiling with Typescript, but unfortunately, it didn't solve my issue... It's slightly different. When running yarn tsc --project tsconfig.json ...

javascripttypescript

Navigating through the intricacies of debugging TypeScript in Angular-Meteor

After following the tutorial for the Socially app in Angular2 using angular-meteor, I managed to get it working with some manual adjustments for package dependencies. However, I am running into an issue while trying to debug the client side code in Chrome ...

angularjsmeteortypescriptangularangular2-meteor

Tips for concealing the delete button within the main content area and displaying it in the subsequent "add" pop-up window upon clicking the "add" button in Angular

I have a card with add and delete buttons. I want only the add button to show initially, and when clicked, a new card should open with both add and delete buttons. Everything is working as expected except I can't figure out how to hide the delete butt ...

javascripthtmlangulartypescript

Derive a subset Union from a Union in Typescript

Here is a scenario with a Union type I'm working with; type MyUnionType = 'foo' | 'bar' | 'baz' What I need to do is create a new Union called MySubUnion, which will be a subset of the original; type MySubUnion = &apos ...

typescript

A guide to simulating a JQuery Ajax request with an Angular 2 component

We have a new project underway developing an angular 2 application. Our chosen framework for unit testing is Jasmine. I am currently working on creating my first unit test within this environment. The component we are testing makes an AJAX call to a web se ...

jqueryajaxangularmockingjasmine

Issue with parameters in NodeJS: req.params not defined

Requesting data by ID from the server is my current task. I have written an Angular 2 service to handle this: import { Injectable } from '@angular/core'; import { Http, Response, Headers } from '@angular/http'; import { AppConfig } ...

node.jsangular

Unable to retrieve component name using React.Children

While working with react in the nextjs framework, I attempted to create my own dropdown component structured as follows: <Dropdown> <DropdownToggle>Action</DropdownToggle> <DropdownMenu> <DropdownItem>Menu 1</Dr ...

javascriptreactjstypescriptnext.js

What are the steps for implementing function composition or pipelines with a multi-parameter function?

During a recent interview, I was tasked with retrieving data from the jsonplaceholder /posts and /comments endpoints and creating a function to match comments with posts where comment.postId == post.id, then constructing a unified JSON object containing ea ...

javascripttypescriptfunctional-programmingramda.js

Encountered Runtime Issue of TypeError: undefined cannot be iterated (unable to access property Symbol(Symbol.iterator))

I've been working on a multiselect feature in my Next.js project, utilizing states and setting them accordingly. However, I keep encountering this specific error: https://i.stack.imgur.com/m8zuP.png whenever I click on this: https://i.stack.imgur.c ...

javascriptreactjstypescriptmongodbnext.js

Do other effects promptly process actions dispatched by one ngrx Effects effect?

I am facing an issue in my Angular (2) application where I have implemented four ngrx actions: START This action is not processed by the reducer, meaning there is no state change The ngrx Effect triggers an asynchronous task and maps it to either SUCCE ...

angularngrxngrx-effects

Enhance the express Response type and then export my updated type as a distinct module

I am currently working on developing a new 'common' module for my team. One of the key features it should have is an extension of both the response and request objects in Express. Our main goal is to achieve two things - first, extending the Req ...

typescriptexpressnpmexport

Supabase Type Generation Not Working as Expected

Every time I try to update my typing through the cli command, I keep getting this error message without much information for me to troubleshoot. 2023/03/01 09:34:01 Recv First Byte Error: failed to retrieve generated types: {"message":"Forbi ...

javascripttypescriptnuxt.jssupabase

Guide to executing various datasets as parameters for test cases in Cypress using Typescript

I am encountering an issue while trying to run a testcase with multiple data fixtures constructed using an object array in Cypress. The error message states: TS2345: Argument of type '(fixture: { name: string; sValue: string; eValue: string}) => vo ...

typescriptmocha.jscypresstypescript2.0

Requirements for Method Decorators - The complete path of the class module using the decorator must be provided

Upon running the decorator (method decorators) function, we are provided with access to target, methodName, and descriptor. I am seeking the module path for target in this specific scenario. Essentially, I want the file path that points to the module that ...

typescript

Retrieve information from the local storage every second

I have developed a new application using Angular 8. Within this component, I have created a model where users can select an option. I wrote a function in the TypeScript file to store this information in local storage. Now, I need assistance with retrieving ...

angularangular8

Error: Gulp is using ts-node and returning 'void' instead of 'Task', but it cannot find the type 'Task'

Seeking assistance from experienced individuals in the realm of gulp.js and typescript - could someone provide guidance for a struggling newcomer? I am currently utilizing the most recent versions of all relevant tools (node, ts-node, gulp, ts, @types/gul ...

typescripttypesgulp

`Unable to upload spreadsheet file in xlsx format`

I'm currently working on implementing a feature to export data as xlsx files. I have been successful in exporting CSV and PDF formats, but encountered issues with the xlsx format due to dynamic imports. export const exportToXlsx = async ( gridElemen ...

reactjstypescript

Adjust the starting color of a mat-input in Angular 9

I am encountering an issue with the styling of a standard matInput field within a mat-form-field, all contained within a [formGroup] div. The dark background of the parent element is causing visibility problems with the default dark text color of the input ...

cssangularcolorsmat-input