Explore accessing TypeScript class properties within a JavaScript function

This is the code I have:

    export class CustomToast implements OnInit {
            toastTypeGroup: string;
            message: string;
            title: string; 
            showDuration= "300";

            constructor(_toastTypeGroup: string, _message:string, _title: string ){
                this.toastTypeGroup = _toastTypeGroup;
                this.message = _message;
                this.title =  _title;
            }

            ngOnInit() {
                **//Here's a possible solution** 
                **var _this = this;**
                console.log(this.showDuration);
                var ToastrDemo = function () {
                    var toastr: any = (<any>window).toastr;
                    var k, m = -1, f = 0;

                    var t = function () {
                        var t, o,
                            //toastTypeGroup
                            e = this.toastTypeGroup,
                            //message
                            n = this.message,
                            //title
                            a = this.title,
                            //showDuration
                            i = this.showDuration,
                    };

                    return { init: function () { t() } }
                }();jQuery(document).ready(function () { ToastrDemo.init() });

            }



        }

I am facing an issue where I need to access member values from my class named CustomToast within a JavaScript function called var t = function () {...}.

The problem is that I cannot retrieve typescript class member values inside a JavaScript Function. For example, the member "toastTypeGroup" is not accessible within my function. This presents a major challenge.

I would appreciate any help on this matter. Thank you in advance.

Answer №1

Change

_this = this;

place this statement at the start of ngOnInit and utilize either _this.showDuration or opt for bind(this)

Answer №2

The question is a bit confusing, but one way to resolve it would be by including the .bind(this) method in your definition of variable t.

var t = function () {
    var t, o,
        //toastTypeGroup
        e = this.toastTypeGroup,
        //message
        n = this.message,
        //title
        a = this.title,
        //showDuration
        i = this.showDuration,
}.bind(this);

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

Trigger a dispatched action within an NGRX selector

I want to ensure that the data in the store is both loaded and matches the router parameters. Since the router serves as the "source of truth," I plan on sending an action to fetch the data if it hasn't been loaded yet. Is it acceptable to perform the ...

What is the reason for both the d3 line chart and bar chart being shown simultaneously?

On my website, I have implemented both a d3 bar chart and a line chart. You can view examples of them here: line_chart and bar_chart. However, in certain situations only one of the charts is displaying instead of both. Can anyone provide guidance on how ...

Why does wp-ajax return 0 on the front end but work perfectly in the admin area?

After implementing these functions in my plugin, they are functioning properly in the backend. However, I am encountering a response of 0 in the frontend. I have tried copying and pasting the same code, and have also attempted using both admin_enqueue_scri ...

Exploring the power of Jquery Ajax with REST, diving into nested lists and utilizing

When using Ajax/Rest/Jquery with Sharepoint lists, a common challenge arises when dealing with nested data structures. For example, if we have a list structure like List:Users -> Department -> Manager (where Manager is a People-Picker item in Departm ...

The Jquery code encountered an issue where it was unable to access the property 'length' of an undefined

My goal is to submit a form using jQuery and AJAX, which includes file upload functionality. The challenge I'm facing is that the forms are dynamically created, so I need to identify which form was clicked and retrieve its input values. $(document).r ...

iPhone - touchstart event not functioning in JavaScript

Looking for a solution to dynamically resize a div in JavaScript when clicking on a link element (<a>). However, the code doesn't seem to function properly on my iPhone. Let's start with a basic link: <a href="#" onfocus="menu()">ME ...

Tips for personalizing the error message displayed on Webpack's overlay

Is there a way to personalize the error overlay output message in order to hide any references to loaders, as shown in this image: https://i.sstatic.net/ESFVc.png Any suggestions on how to remove the line similar to the one above from the overlay output? ...

Encountered an error: [$injector:modulerr] while using AngularJS

I need help creating a registration form using AngularJS. I am encountering an error in my app.js file: (function (){ 'use strict'; angular.module('modulemain',[]).controller('ModuleController',ModuleController); ...

Changing a list of items with unique identifier keys

I've got add I've got delete now I need to make modifications The add function simply adds to the collection without any organization The delete function is precise, using a key to locate and remove the desired item: addInput = (name) => ...

Unpacking objects within an array in the backend of a Next.js application

How can I resolve this issue? I am passing the req.query parameter with an array but I am unable to destructure or use items from the array. In my Next.js API backend, I only get [object Object] or undefined. How can I access and select specific values fro ...

Creating a unique styleset in styled-jsx using custom ruleset generation

TL;DR What's the best way to insert a variable containing CSS rules into styled-jsx (using styled-jsx-plugin-sass)? In my JSX style, I have the following: // src/pages/index.tsx ... <style jsx> {` .test { height: 100vh; width ...

Restrict the amount of items fetched when processing JSON information

Here is a snippet of JSON data that I am parsing using JavaScript. "credits":{ "cast":[{ "id":819,"name":"Edward Norton","character":"The Narrator","order":0,"cast_id":4,"profile_path":"/iUiePUAQKN4GY6jorH9m23cbVli.jpg" }, {"id":287,"name": ...

Sending data from JavaScript with $.ajax does not populate $_POST in PHP

Currently, I am working on a Wordpress site and facing a challenge with sending data (dynamically created CSS styles using jQuery) to PHP. The purpose of this process, although not entirely relevant to this query, is to generate a .css file that can be loa ...

Unable to modify the height and color of tabs in Angular 6

I am in the process of learning Angular, CSS, and HTML. I have been using MatTabsModule to create tabs, but I am having trouble adjusting the height, background, and other properties of the tabs. I am struggling to override the default properties of MatTab ...

Tips on transmitting form information from client-side JavaScript to server-side JavaScript with Node.js

Having created an HTML page with a form, my goal is to capture user input and store it in a JSON file. However, I've run into some confusion... In the process, I utilized the express module to set up a server. My mind is juggling concepts such as AJA ...

Using preventDefault in the compositionend event does not make any difference

var inputNode = document.getElementById('view_1'); inputNode.addEventListener('compositionend', function(e) { console.log(e.cancelable); // true e.preventDefault(); }); <div id="view_1" class="view" contenteditable="true> &l ...

Having trouble with shared HTML in Angular 4 not functioning as thought?

I have implemented a shared HTML code for search functionality across multiple pages search.component.html <form class="p-2" (ngSubmit)="searchHere(query)" #customersearch="ngForm"> <div class="input-group custom-search-form float-right"> ...

Execute another ajax call based on the response received from the initial ajax request

I have a header file with a search box where users can search for products using an ajax request. The search results are retrieved from the livesearch.php file. Now, I want to add an 'Add to Cart' button next to each searched product. This button ...

Which method proves to be more effective - making an ajax call to the server or iterating through the data array?

I am faced with a dilemma regarding an array of data. Let's call it var products =[]; this array will consist of 10000 elements. My task is to identify all the products that have the name item1. Which method would be more efficient in terms of perform ...

What is the best way to retrieve a value from an array?

Using ASP.net Core, I receive information from my API. In Angular, the data looks like this: 0: {Id: 3, Role_Name: 'ITAdmin'} 1: {Id: 4, Role_Name: 'Admin'} 2: {Id: 5, Role_Name: 'user'} I want to extract values from this arr ...