Is it possible to retain the expanded items in a Nested Tree even after refreshing or updating the page?

I am working with a nested tree data structure that can be found at the following link: https://stackblitz.com/edit/angular-ivy-wcv63x?file=src%2Fapp%2Fapp.component.ts

My objective is to maintain the selected tree items in an expanded state even after a page refresh.

Initially, I attempted to collect all the selected tree items into a separate variable so that we could return this list to the app component.

However, I am currently struggling to find a solution for processing this expanded list.

angulartypescript

Answer №1

If by refreshing you are referring to reloading the entire browser page, I recommend utilizing localStorage for storing the object in a durable manner.

localStorage.setItem('forest', JSON.stringify(this.dataSet)); // Store your data

this.dataSet = JSON.parse(localStorage.getItem('forest')); // Retrieve your data upon page load

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

Error message: The specified type is incomplete and lacks certain properties, according to Typescript

I'm encountering an error that's hindering the deployment of my website on Vercel. Any assistance would be greatly appreciated. Usually, I retrieve the pageInfo data from Sanity and use it on my website. The issue lies in this peculiar TS error t ...

reactjstypescriptnext.js

How to Implement Click Event Handling and Animation Effects in Angular 4

Every time I click on an item in the accordion list, all items expand. Is there a way to only open the card whose header was clicked? check out this plnkr example app.component.html <div id="accordion" *ngIf="res"> <div clas ...

angulartypescriptanimationangular-animations

Is it viable to utilize the same domain (a proprietary system) with various frameworks on specific URLs?

Is my intention clear? I am looking to achieve the following: I currently have a system at: www.example.com This system consists of multiple pages/endpoints that were created using outdated Angular (frontend) + outdated Lumen (api/backend). Now, I need ...

node.jsangularapachesessionauthentication

Instructions on how to present a list of employee information according to the user's gender preference using a selection of three radio buttons

I have developed a view that displays a table of employees, using a json array to store their details in the component. Additionally, I have implemented 3 radio buttons: all, male, and female. My goal is to have the table show all employees when "all" is ...

htmlangulartypescript

There is no default export defined in Typescript

Currently, I am in the process of developing an npm module that serves as a basic logger. The initial implementation was done using plain JS: logger.js class Logger { // additional code } module.exports = Logger; The above code works seamlessly in a ...

typescripttypescript-typings

How can we implement ngxs async observable interpolation in a component.ts file instead of the HTML?

When working on my Angular app's HTML, I successfully displayed the "title" from a variable using the following code: The following code worked fine in my component.html file: <input matInput value="{{ (app$ | async).myTitle.match('title: &a ...

javascriptangular

Explore an example of using custom controls in a FormArray within an Angular 5 reactive form on StackBlitz

Check out my sample project on stackblitz that tests nesting components and retrieving the complete form value. https://stackblitz.com/edit/mensand-hobbies-football-tennis This is a demonstration where I aim to utilize different components stored in an a ...

angularreactiveformarray

When a dynamic formControl is added to a formArray, all mandatory inputs will automatically change color to red

Whenever a formcontrol is added, all necessary inputs will change to red. Take a look at my demonstration below: https://stackblitz.com/edit/angular-emman-sample?embed=1&file=src/app/app.component.html ...

angularangular-materialangular-reactive-forms

Encountering a hitch in loading Typescript modules

I'm attempting to utilize Typescript modules, but I'm encountering issues with loading them properly. Each time I try to import the module, I receive the following error message in my JS file: JavaScript runtime error: 'exports' is und ...

typescript

A versatile Typescript array serving both as a storage for type information and input parameters

Our API is designed to handle a large amount of data, allowing users to control which properties are returned by using the fields parameter. The API definition looks like this: interface Foo { A?: string; B?: number; C?: boolean; D?: string ...

typescript

Encountered an error while attempting to load the object using the pre-signed URL in Min

I've been utilizing the Minio Server for managing files within my Flask API. I create Presigned URLs to facilitate direct image uploads from the Angular FrontEnd, reducing strain on Backend resources. While the Presign URL Generation functions correc ...

pythonangularflaskpostmanminio

Extracting individual parameters from a specific URL in Angular 9

Imagine we have various types of urls: [1] /home/users/:id [2] /home/users/:id/posts/:id [3] /home/users/:id/posts/:id/comments/:id I am looking to create a method called parseUrl(url: string): any[] {} that can take a url as input and provide an array ...

angularurlangular-routingangular9urlparse

How to pass data/props to a dynamic page in NextJS?

Currently, I am facing a challenge in my NextJS project where I am struggling to pass data into dynamically generated pages. In this application, I fetch data from an Amazon S3 bucket and then map it. The fetching process works flawlessly, generating a se ...

javascriptreactjstypescriptnext.js

The npm package is unable to be imported

I've been working on a TypeScript project and wanted to incorporate the following library: https://github.com/Simonwep/pickr According to the project instructions, I have performed the following steps: import '@simonwep/pickr/dist/themes/nano.m ...

typescriptnpm

Mapping a TypeScript tuple into a new tuple by leveraging Array.map

I attempted to transform a TypeScript tuple into another tuple using Array.map in the following manner: const tuple1: [number, number, number] = [1, 2, 3]; const tuple2: [number, number, number] = tuple1.map(x => x * 2); console.log(tuple2); TypeScript ...

typescripttuples

How can I access a service without the need to import its provider module?

My goal is to grasp the concept of multiple NgModules in an angular application and how they interact, specifically focusing on importing a SharedModule for commonly used services into lazily loaded feature modules. Here's the sequence of steps I fol ...

angularservicemodulelazy-loading

Using Typescript/JSX to assign a class instance by reference

Looking to access an object's property by reference? See the code snippet below; class Point{ x:number; y:number; constructor(x,y) { this.x=x; this.y=y; } } const a = { first: new Point(8,9), second: new Point(10,12) }; let someBoo ...

javascripttypescriptpass-by-referencejsxpass-by-value

Utilizing Protractor's advanced filtering techniques to pinpoint the desired row

I am trying to filter out the specific row that contains particular text within its cells. This is my existing code: private selectTargetLicense(licenseName: string) { return new Promise((resolve => { element.all(by.tagName('clr-dg-tab ...

javascriptangulartypescriptprotractor

How to Use Angular 2 to Eliminate Unnecessary Commas in a Text/CSV

Seeking assistance with removing extraneous commas from a file, using the code snippet below: const data: any = utils.sheet_to_csv(ws); let blob = new Blob(['\ufeff' + data], { type: 'text;charset=utf-8;' }); let dwldLink = docum ...

angulartypescript

Setting the initial navigation theme based on route parameters from an external source, not within the StackNavigator

Is there a way to set the initial navigation theme based on the current route params without rendering the NavigationContainer and causing a flash of content with the default theme? Can the route be accessed from outside of the NavigationContainer without ...

typescriptreact-nativereact-native-navigation