Is it possible to listen to an event triggered in AngularJS using regular JS (outside of Angular)? I have a scenario where an event is being emitted using RxJS in Angular 2. Can I observe that event from pure JS?
Here's some example pseudo code:
import {Observable} from 'rxjs/Rx';
...
@Output() responsesEvt = new EventEmitter();
...
this.responsesEvt.emit(this.form.value);
I am looking for a way to subscribe to `responsesEvt` when it's triggered outside the context of Angular 2.
@Output() and EventEmitter are specifically designed for Angular event binding such as
(responsesEvt)="doSomething($event)"For other scenarios, it is recommended to utilize Observable or Subject.
If you need to send notifications from Angular to JavaScript outside of Angular, you can use DOM events like:
constructor(private elRef:ElementRef, private renderer:Renderer) {}
someMethod() {
this.renderer.invokeElementMethod(this.elRef.nativeElement,
'dispatchEvent',
[new CustomEvent('responses-evt', { bubbles: true })]);
For more information, refer to
If you need to create a custom observable and then subscribe to it as needed, you can do so with the following code snippet:
import { Observable } from 'rxjs/Rx';
import * as Rx from 'rxjs/Rx';
.......
customObservable: Rx.Subject<any> = new Rx.Subject<any>(); //create new observable using subject
this.customObservable.next(your_value); //trigger your observable
.......
In another part of your project where you wish to listen for changes:
this.Service.customObservable.subscribe(data => { //subscribe to your observable to receive updates
console.log(data);
})
Attempting to create a scalable Custom Form using an array of objects and a custom Input field in a React-Typescript project import React, { ChangeEvent } from "react" import { InputField } from "./InputField" interface FormItem { ...
According to information from http://www.json.org/js.html, JavaScript objects can specify how they are serialized by JSON.stringify() through the use of a toJSON() method. It is interesting to note that numbers and strings appear to have this method, but f ...
Javascript function printPage(htmlPageContent) { var newWindow = window.open("about:blank"); newWindow.document.write(htmlPageContent); newWindow.print(); } In this code snippet, we are creating a new window 'newWindow' and then using ...
I need assistance with a JavaScript code. I have three links, each with a different ID. What I am trying to achieve is that when I click on one of these links, the script should grab the ID, delete all three links, and replace them with text in their place ...
Is it feasible to implement a timeout for running node.js? I am faced with the issue of connecting to external services that occasionally do not respond, causing my script to hang and the node.js process to freeze. I am seeking a solution to enforce the t ...
Previously, I was able to determine if a user had arrived on the page by clicking the back button in the previous page using window.performance.navigation.type like this: if (window.performance.navigation.type === 2) { window.location.reload() } Howe ...
I am currently learning about React Hooks While I try to render a list from an array and remove the first element on click, the state gets updated in the handleclick function but it doesn't render correctly export default function App() { const [na ...
I'm currently learning about three.js and working my way through the documentation. I'm struggling to understand the meaning behind the following explanation, could someone provide some assistance? When you manually create the WebGL 2 renderin ...
After writing a fetch command, I was able to see the data in the console.log but for some reason it is not showing up in the DOM. export default async function links(){ const res = await fetch('https://randomuser.me/api/'); const data = ...
I'm having a problem with dynamic binding in my drop-down. I can't seem to display the default selected value in the label, and when I change the selection, the new value isn't showing up either. Take a look at my code below: <p>{{l ...
As a newcomer to Angular 2, I am working on creating a login form that encrypts and sends the user's emailid and password to the server. I have successfully implemented AES-ECB using AES-CTR from the following link: https://github.com/diafygi/webcry ...
In a scenario where a button and an input field are enclosed within a div with a bootstrap class named input-group, they expand to occupy the entire width of the enclosing element. However, if the button is hidden, the input field unexpectedly contracts to ...
Can the Angular Service Worker be utilized in IE11? Although CanIuse indicates that IE11 is not supported, there is a Polyfill available for older browsers that offers Promises support - the foundation on which the Service Worker operates. Has anyone succ ...
I am currently developing a website with a gallery page that utilizes the Magnific Popup plugin. My client has provided lengthy 'captions' for each image, almost like short stories. To display these captions effectively, I have utilized the titl ...
There are 4 tabs available on a JSP page: Tab 1, Tab2, Tab3, and Tab4. Initially, only Tab1 is enabled, allowing users to freely work within that tab. However, Tabs 2, 3, and 4 are disabled, preventing users from accessing their contents. A checkbox is lo ...
Currently, I'm facing some challenges trying to deploy a simple Twitter-like app to HEROKU or MongoDB. However, I seem to be hitting roadblocks with both platforms. With MongoDB, I encounter either an internal server error or the actual code displayin ...
Is there a way to transform a lengthy checkbox tree into a more manageable grid layout? The main issue is the lack of grouping wrappers, with only partial padding indicating group relationships. Check out this StackBlitz link for reference It seems that ...
In my project, there is a template driven angular form for the Edit profile section in the app. Data is populated from the API for the form, with fields being empty if no data is available. When a user types new data into the fields, it is successfully pos ...
I find myself in a challenging situation without a clear solution at hand. Within this code, I am utilizing a link and a button for which I need to save the page in a database. Therefore, creating a server control is not an option as it will not be render ...
Looking for a way to dynamically apply borders to cells in my ng table without messing up the alignment. I've tried adjusting cell width, but what I really want is to keep the cells' sizes intact while adding an inner border. Here's the sim ...