Navigating "this" in Angular and jQuery

Question

Navigating "this" in Angular and jQuery

When working in my angular-7 class and using jQuery, I encountered a problem where I needed to store all text from h4 tags in an array. However, the issue was that when using this, it would only refer to Angular's version of this rather than jQuery's. Despite attempting to use the fat arrow function, I still couldn't get it to work as intended.

I also experimented with callback parameters in hopes of accessing the elements, but they continued to remain undefined.

Below is the code snippet I've been struggling with. Any suggestions or help would be greatly appreciated.

Thank you.

$('h4').each((idx, elem) => {
            this.listItems.push({ id: idx, text: elem.innerText });
        });

jquery angular typescript angular7

Answer 1

Answer №1

Arrow functions do not create their own scope for 'this' keyword. If you need to create a function scope like this, use a normal function instead.

var self=this;
    $('h4').each(function (index, element) {
                //use 'self' for accessing 'this' inside angular components
                self.listItems.push({ id: index, text: element.innerText });
            });

Answer 2

Arrow functions do not create their own scope for 'this' keyword. If you need to create a function scope like this, use a normal function instead.

var self=this;
    $('h4').each(function (index, element) {
                //use 'self' for accessing 'this' inside angular components
                self.listItems.push({ id: index, text: element.innerText });
            });

Answer 3

Answer №2

Here is a helpful solution

let self = this;
    $('.title').each(function (index, element) {
                //utilize self for referring to Angular component's instance
                self.itemsList.push({ identification: index, content: element.innerText });
     });

Answer 4

Here is a helpful solution

let self = this;
    $('.title').each(function (index, element) {
                //utilize self for referring to Angular component's instance
                self.itemsList.push({ identification: index, content: element.innerText });
     });

Navigating "this" in Angular and jQuery

Answer №1

Answer №2

Similar questions

Failure of jQuery Code Upon Successful Execution

preserving the checkbox state using jquery, ajax, and php

CodeIgniter: Redirecting Made Easy

Guide on incorporating a library into your Ionic application without the need to upload it to npm

Tips for sequentially arranging and rearranging an array of numbers, even when duplicates are present

Atom-typescript does not always successfully compile all typescript files to JavaScript

Utilizing jQuery to extract the id and update its content

The Increment of DOM Event Detail Stays Unchanged When Angular Click Event is Triggered

Guide on how to display matching options in an input box using HTML datalist based on user input at the beginning

Using jQuery to continuously make an ajax call until it completes and then return the callback result

Tips for emptying form fields when sliding up in jQuery

Creating tables and defining their structure with jQuery for HTML can be done using the following steps

Tips for displaying three divs in one row and three divs in another row

Sending multiple data from a View to an Action method

Tips for getting Angular's HttpClient to return an object rather than a string?

What is preventing me from modifying database information by deselecting checkboxes in CodeIgniter?

Encountering the message "npm ERR! missing script: start" following the update to .Net 3.0

Utilizing TypeScript to Populate an observableArray in KnockoutJS

Updating the Highcharts chart when new data is available

JQuery datepicker is functioning properly only after an alert when loaded with AJAX