Edge browser experiencing issues with dispatchEvent functionality

I'm facing an issue in my Angular application where I need to open a new window and dispatch an event back to the controller. The code works fine on Chrome and Firefox, but unfortunately, it doesn't work on Edge.

Here is the code snippet from the external file:

try {
   var ev = new Event('abc');
   ev['data'] = model;
   window.opener.dispatchEvent(ev);
} catch (e) {
    alert(e);
}

While executing the code in the external window, I receive an alert displaying ERROR: invalid argument.

In the Angular component, I have the following listener set up:

@HostListener('window:abc', ['$event'])

I haven't found much helpful information in other answers. If anyone could provide guidance or solutions, I would greatly appreciate it.

Thank you.

Answer №1

The issue did not lie with the dispatchEvent method. Rather, it stemmed from the child window losing connection to the parent angular component when it was initially opened. The solution I found can be traced back to this thread.

Prior to opening the child window, it is essential to establish a reference to the angularComponentRef.

window['angularComponentRef'] = {component: this, zone: _ngZone};

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

Referencing a variable within a string: Discord.js Hyperlink

Essentially, when attempting to use a discord hyperlink, I found that breaking the string to add a variable does not work as expected. I have tried calling it using $ and {} but it still doesn't work. .addField('Shortcuts', $'[Profil ...

JavaScript utilizing an API to retrieve specific data values

Below is some API Data that I have: [ { "symbol": "AAPL", "name": "Apple Inc.", "price": 144.98, "changesPercentage": -1.22, "change": -1.79, ...

Error alert: The system could not locate Google when trying to drop pins

Every time I attempt to place pins on the map, I encounter the "google is not defined" error. The map itself displays without any issues until I add the lines following the initMap() function. I have come across similar posts but none of the suggested so ...

Is it possible to dynamically adjust div height using on resize event?

In my current setup, I have two separate divs on the left and right sides. The issue arises when the height of the left div exceeds the height of the right div. In such cases, the function adjusts the heights to be equal and hides any excess text in the le ...

Bring JSON into Angular 7 application

For my Angular project, I've set up a localization service by importing JSON files. Following this recommended method, I updated my typings.d.ts as shown below: declare module "*.json" { const value: any; export default value; } Everything w ...

Guide to building a JavaScript array and storing data from a separate array into the newly created array in JavaScript

Can you help me create a JavaScript array and save another array of data to be part of the newly created array in JavaScript? I attempted it using the code below. Code: var vvv=this.new_products.length-this.quote.lines.length; let mmm={}; if(v ...

What is the best way to verify if a text input has a valid email format in ReactJS?

When working with ReactJS, how can I properly check if text entered in a <TextField/> component is in email format (i.e. contains @)? Since my application is connected to MongoDB, should I perform the email format validation on the client-side or se ...

The script for tracking cursor coordinates is incompatible with other JavaScript code

<html> <script language="javascript"> document.onmousemove=function(evt) { evt = (evt || event); document.getElementById('x').value = evt.clientX; document.getElementById('y').value = evt.clientY; document.ge ...

Change validators dynamically according to conditions

Scenario: At the start, there is a single text box named Name1, a date picker called DOB1, and a check box labeled Compare. Both Name1 and DOB1 are mandatory. When the checkbox is clicked, two new form controls are dynamically included, named Name2 and DO ...

Issue with Yarn and Webpack: Unable to locate module 'contextify' in Node

My current challenge involves running an app (which I am currently working on) by executing the command: yarn start However, upon trying to run the app, I encountered the following error message: ts-node ./src/engine/server/server Error: Cannot find mod ...

What is the best approach to efficiently generate an array that strictly follows a specified Union type without the need for manual duplication?

Having the specific NameUnion type, it is important for consistency that I define it once and later on check if an array contains an element from the NameUnion type. type NameUnion = // Home && login | 'email' | 'newEmail&ap ...

The property 'toLowerCase' cannot be accessed as it is undefined or null

Scenario: A textbox is present with a list of data below it. Upon typing in the textbox, the list gets filtered based on the text entered. Code: Pipe: @Pipe({ name: 'search' }) export class SearchPipe implements PipeTransform { transform( ...

The term 'Navigator' is not recognized within the Next.Js App router

I have a component with code marked as "use client" at the top. Within this component, I have a button in the return section that checks for navigator share availability before displaying it. This is because the Web Share API is not universally supported b ...

Tomickigrzegorz Script Finder Predictive Search

Hey there, I recently tried out the autocomplete script created by tomickigrzegorz. Check it out here! It's been working smoothly for me, but I'm facing an issue with external link tags like https//google.com not functioning properly. Here is ...

The messageReactionAdd event has suddenly stopped functioning without any explanation

Currently, I am developing a Discord bot that assigns the role "Voteur" to a user when they react to an embed message created by the bot. Everything was functioning perfectly until recently, but for some reason, it has stopped working. The bot successfull ...

Understanding how to implement action logic in React Redux to control visibility of specific categories

Seeking guidance on how to implement action logic for displaying and hiding elements based on user interaction. Currently, all categories and subcategories are shown at once, but I would like them to be displayed only when a user clicks on them. When a use ...

Trouble with triggering events from Datatable buttons

Below is the code snippet I am currently using for my DataTable : var oTable12= $('#example').DataTable({ "aaData": tableData, "aLengthMenu": [[5, 10, 20, -1], [5, 10, 20, "All"]], "iDisplayLength": 5, "aoColumnDefs ...

Encountered an error trying to access property 'history' of an undefined value while using react-router v4 and create-react-app

I encountered an issue with using Link to navigate, here's the breakdown of my code: Directory structure components ----App.js ----home ----Home index.js index.js import React from 'react'; import ReactDOM from 'react-dom'; ...

Receiving the error message "Encountered issue reading property of 0" while attempting to retrieve a specific element from an array

Currently, I am facing an issue where I am trying to access a value that is set in one function within another function. When I attempt to return this value at the end, the console.log displays the value correctly. However, when I try to set it, I receive ...

Vuetify - Best practices for managing click events with <v-btn>?

As a newcomer to vuetify and vue, I am currently trying to understand how to handle a click event on a <v-btn>. (Using vue 2.6.10 and vuetify 2.0.0) (I was surprised to find that I couldn't locate a single functioning code snippet, despite sear ...