Storing Jquery result in a variable in Angular

Within my Angular component, I have a folder structure that needs to retain its previous state (which folder was open) even after reloading due to CRUD operations.

https://i.sstatic.net/z44k6.png

The API sends back a nested response utilized for generating the folder structure using *ngFor directive.

I attempted to save the previous state by relying on the '.highlight' class to identify the open folder, as shown below:

//highlight table selection & store the current folder selection
    $('#Table').on('click', 'tbody tr', function(event) {
      $(this).addClass('highlight').siblings().removeClass('highlight');
       sessionStorage.setItem("previousFolder",$(this));
    });

However, when trying to access the "previousFolder" from session storage and utilize typical jQuery methods like ".find()", ".parent()", or ".click()" in an Angular component, it is not feasible as it returns as HTMLelement Object.

What would be the most effective approach to save and restore jQuery results within an Angular component?

htmljquerycssangular

Answer №1

I utilized Angular variable to store the jQuery result and accessed it when necessary by following this method

const vm = this; // ensuring that both jQuery and Angular share the same 'this' context within the function
$('#Table').on('click', 'tbody tr', function(event) {
      $(this).addClass('highlight').siblings().removeClass('highlight');
       vm.previousState = $(this);
    });

the previousState functions akin to regular jQuery selectors with events

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

Slideshow through each item using Typescript and Angular8

I came across a solution in this carousel on by one link, but I'm struggling to work with the jQuery code even though I have JQuery installed in my project. For example: const next = jQuery(this).next(); I am looking to convert the JQuery code from ...

jquerycssangulartypescriptcarousel

Ways to eliminate non-breaking spaces in HTML coding without using software

Although similar questions have been asked in the past, I am new to coding in Javascript and struggling to adapt the existing advice to fit my specific situation. My current challenge involves removing "&nbsp" from the hardcoded table row below. Ideal ...

javahtmlhard-coding

Email Form Troubles in JQuery/PHP

As I navigate my way through JQuery, I am working on sending a message to all users on my site using JQuery/Ajax. Here is the code I have so far: mass-email.php <?php include('includes/db_connection.php'); include('includes/sessions.php ...

phpjqueryajax

What is the best way to incorporate text transitions using jquery?

Recently, I've come across this code snippet: $('#slider_title').text(var); This line of code successfully adds the text stored in a variable to the paragraph identified by the id "slider_title". And now, my goal is to smoot ...

javascriptjquery

What is the technique for causing this element to move in reverse?

How can I utilize JS to halt the interval and direct the alien to move backwards once it reaches 700px? I am aware that CSS can achieve this, but I prefer a strictly JS approach. I am struggling with stopping the interval as it hits the left position of 70 ...

javascripthtmlcss

Javascript is throwing an unexpected token error due to an HTML alteration, which is indicated by the character

Each time I make a modification to my HTML file, I encounter a javascript error saying Unexpected token '!'. It appears that any change made to the HTML file triggers a javascript error. Despite this, there is nothing incorrect with the code itse ...

javascripthtml

Take a snapshot of an element using fixed element positioning

When it comes to extracting a sub image from a webpage using Selenium, I have found a reliable method. First, I capture a screenshot of the entire page and then extract the desired sub-image using the element's coordinates. Dimension elementDimension ...

javajqueryhtmlcssselenium

Guide to setting up a back button to return to the previous page in an iframe application on Facebook

I've developed a Facebook application that is contained within an IFRAME. Upon opening the application, users are presented with the main site, and by clicking on the gallery, they can view a variety of products. The gallery includes subpages that lo ...

javascriptjqueryiframe

How can you minimize the size of your HTML files?

My code generates an HTML file, but when there is a large amount of text, the file can exceed 50mb, sometimes reaching 70-80mb. I prefer to avoid having an HTML file of this size. Below is the source code defining an HTML template: namespace Structure { ...

htmlc++css

The size of text enclosed within div elements appears distorted

Having difficulty adjusting text size within div tags, specifically when trying to set it in pixels. For example, setting font-size to 20px while maintaining a div size of 250 by 50 pixels results in stretched out text. Here's the code snippet: .NavB ...

htmlcss

What is the best way to change an array element into a string in TypeScript?

Within my Angular 2 component, I am utilizing an array named fieldlist which is populated by data retrieved from an http.get request. The array is declared as follows: fieldlist: string[] = []; I populate this array by iterating through the JSON response ...

arraysangulartypescript

Creating videos for banners

So I have a website at this URL: My goal is to achieve the following: I want the video to play in the banner and adjust the Iframe size based on the user's device resolution I want the video to autoplay I want the logo, text, & button to be dis ...

csshtml

The Dropdown Button Functions Once and Then Stops

I am facing a challenge in implementing a button within an HTML table that triggers a dropdown menu when clicked, and closes upon another click or when the user clicks outside the menu. Oddly, the button only seems to work once before completely losing fun ...

javascriptjqueryhtmlcss

What is the method to declare data types within the map function?

When retrieving data from a server, I receive an object that includes four arrays with different types of objects. I am attempting to map this data before subscribing to the observable so that I can properly utilize the classes in my frontend: getData(){ ...

arraysangulartypescriptrxjsobservable

Hosting images with an online service on jsfiddle: A guide

Exploring the world of HTML canvas and honing my skills in HTML and CSS through jsfiddle, I am eager to incorporate my own images. While sites like Google Drive provide free image hosting, I wonder if I can utilize them with drawImage(); Is there a way to ...

javascripthtmlimage

Angular Ivy Internationalization: Translation not available for <ID>

Recently, I made updates to an existing Angular application that is utilizing i18n and upgraded it to version 9. However, post-update, the build process started throwing errors stating that it could not locate my translations: No translation found for "65 ...

angularinternationalization

Comparison of Lit Element and VSCode Plugin: Unfamiliar attribute 'frameborder'

I have a question regarding the use of an iframe within the template of a lit element. The lit element VSCode plugin is reporting the following errors: Unknown attribute 'frameborder'. Did you mean '.frameBorder'? This is a built-in t ...

javascripthtmltypescriptvisual-studio-codelit-element

Ways to create an HTTP request by monitoring when users click outside of an input field

I am struggling to figure out how to achieve this in angular 2. I want to make an http request a few seconds after the user clicks out of the input box. The request should be based on the user's input. Any suggestions on how to accomplish this? I have ...

angular

Move the accordion slider to the top of the browser

I'm working with an accordion menu that has some long content. To make it more user-friendly, I want to add a slide effect when the accordion items are opened. Right now, if you open the first two menu items, the last item's content is cut off a ...

javascriptjquerycssscrollaccordion

What is the reasoning behind referring to RxJS Subject as Multicast and Observable as Unicast?

I've been delving into RxJS for a while now and I'm struggling to grasp why we refer to RxJS Subject as Multicast and Observable as Unicast. I understand that Subject can emit data using next(), and like a regular Observable, we can subscribe to ...

angularrxjsobservable