Passing a variable from a child component to a parent component in Angular 2 using EventEmitter and a

I am experiencing a challenge with the Event Emitter in my child component.

My goal is to pass a variable with EventEmitter to the parent component, but I would like to include a timeout function. Currently, the code looks like this:

CHILD:

export class AlertSuccess implements OnChanges {

    @Input() success: SuccessCRM;
    @Output() emitCollapse:EventEmitter<any> = new EventEmitter();

    private info_ico: string = require('../../public/images/iconInfoTip.png');
    public state: boolean = false;

    constructor() {}

    collapseAlert () {
        let alert = document.getElementById('success');
        setTimeout(function() {
            console.log("BEFORE EMITTED STATE!!!!!: ", this.state );
            console.log(this.emitCollapse);
            this.emitCollapse.emit(this.state); 
        }, 500);
    }

    ngOnChanges(changes: SimpleChanges):void {
        console.log("CHANGES: ", this.success);
        this.collapseAlert();
    }
}

In the parent component, everything is functioning as expected without the timeout function. I need guidance on how to integrate it within the timeout function!

Thank you in advance for your assistance!

Sincerely, Bosper

Answer №1

Implement the Arrow function to accurately reference the correct this.

setTimeout(() => {
    console.log("STATE BEFORE EMIT!!!!: ", this.state );
    console.log(this.emitCollapse);
    this.emitCollapse.emit(this.state); 
}, 500);

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

Choosing an SVG Circle Using TypeScript

I am facing an issue with selecting a simple SVG <circle> element in my DOM using TypeScript: <svg viewBox="0 0 200 200"> <circle cx="50" cy="50" r="45" id="myCircle"/> </svg> In ...

Adjusting the height dynamically of the final div to accommodate various screen resolutions using Angular 8

I am currently developing an enterprise application with Angular, featuring a Sidebar on the left and content on the right. The content container includes text at the top and dynamic elements like tables that need to be displayed below it. To achieve this ...

Is there a way to navigate to a specific <li> element using scrolling?

Is there a way to direct a user to a URL and have it automatically scroll to a specific <li> element? For example, navigating to mysite.com/something.html#someItem should take the user directly to: Something here ...

Chosen option - Selection Menu - Relational Database Language

I am currently working on a dropdown list that needs to be filled from a database: <TH> <FORM> <p>Department</p> <SELECT size="1" id="depart"> <OPTION> <?php ...

Turn off javascript on a website that you are embedding into another site

Is it feasible to deactivate JavaScript on a website you are attempting to embed? If the website is working against your embedding efforts, could you effectively neutralize all their JavaScript, even if it requires users to engage with the site without J ...

Utilizing a switch statement for form validation

Currently, I am in the process of creating a form validation that involves two conditions for validation. I'm considering using a combination of switch case and if else statements. Would this be an appropriate approach or is it generally discouraged? ...

Error message encountered in Rails Webpacker: "Uncaught TypeError: $(...).tooltip is not recognized as a function

I am working on a Rails 6 application where I compile assets using Webpack 4.39.1 with the help of the Webpacker gem. In my webpack configuration file (config/webpack/environment.js), I have included JQuery 3.4.1 and Popper.js as part of the ProvidePlugin ...

"When utilizing a jQuery AJAX request to communicate with a Node.js server, the functionality only seems to

I'm diving into the world of AJAX and feeling a bit lost. On my webpage, I use an AJAX GET request to fetch comments on a post. However, there's a glitch where the request only succeeds after refreshing the page. I even tried disabling the cache, ...

Utilize an AngularJS controller to verify the presence of a cookie and display a modal pop-up

In the process of developing a Single Page Application (SPA), I have encountered an issue with an HTML element calling an AngularJS controller. Here is what I need: I want the controller to check for a specific cookie: - If the cookie exists, call a ...

In a carousel slider, the height and width of divs are not set to specific dimensions

For a code snippet, you can visit this link: here The html: <html lang="en"> <head> <link href="https://fonts.googleapis.com/css?family=Lato:400,400i,700,700i|Merriweather:300,400,700" rel="stylesheet"> <link href="https://ma ...

Tips for centering the InputLabel in Material UI?

Upon loading the page, I am looking to have the InputLabel appear as shown in the second picture. However, I haven't been able to find any InputLabel props that achieve this. I attempted using the focused prop, but it didn't give me the desired o ...

When using Array.find() in TypeScript, the Subscribe function does not get called

I am currently diving into Typescript and web development, but I've encountered a peculiar issue when subscribing to an event that's leaving me stumped. In my service, I'm using a BehaviorSubject to store a carId, and on a page where there&a ...

The parameter type 'never[]' cannot be assigned to the type 'T | (() => T)' in the argument

Is it possible for the useFetch hook to allow any type of array to be used as the data type? hooks/useFetch.ts: const useFetch = <T extends any[]>(dataUrl: string) => { const [data, setData] = useState<T>([]); const [error, setError] = ...

Is there a way to validate an input field and display error messages using a TypeScript file instead of directly in the HTML file within Angular 4?

I am just starting out with Angular, so please bear with me if my question seems basic. I'm eager to learn and hopeful that I can find the answers I need here. Currently, I have implemented validation for an input field that captures a user's Fi ...

Showing or hiding elements based on user roles in Angular 4

I am currently working on a project that involves multiple user types (SuperUser - SchoolAdmin - Teacher). Each role has specific privileges to access certain elements. How can I dynamically hide elements based on the logged-in user's role using *ng ...

The function window.location.reload(true) is failing to properly refresh the page

Currently, I have a PHP page that retrieves data from a MYSQL database and creates HTML content based on the returned rows. I recently implemented a feature where clicking a button adds a new row to the database using AJAX, jQuery, and PHP. However, after ...

Adding an iframe with inline script to my Next.js website: A step-by-step guide

For my Next.js project, I have this iframe that needs to be integrated: <iframe class="plot" aria-label="Map" id="datawrapper-chart-${id}" src="https://datawrapper.dwcdn.net/${id}/1/" style="width: ...

Using variables to replace 'placeholders' in Typescript with string interpolation

Seeking a definitive answer on this matter, I pose the question: In C#, an example of which would be as follows: var text = "blah blah"; var strTest = String.Format("This is a {0}", text); //output: 'This is a blah blah' How can I accomplish t ...

How can I prevent an endless loop in jQuery?

Look at the code snippet below: function myFunction(z){ if(z == 1){ $(".cloud").each(function(index, element) { if(!$(this).attr('id')){ $(this).css("left", -20+'%'); $(this).next('a').css ...

Guide on implementing short-circuit evaluation in Vue method?

Recently, I have been working with vue-cli and vuex to implement a specific functionality. Here is the code snippet that showcases my current progress: methods: { filtered() { let vol = this.$store.state.data[1].data.filter(i => i.type === 'vol& ...