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);
})
My existing angular cli application has been dockerized with the following setup: Dockerfile at root level: # Create a new image from the base nodejs 7 image. FROM node:7 # Create the target directory in the imahge RUN mkdir -p /usr/src/app # Set the cr ...
I am currently working on implementing a content slider within my Django application. The specific slider that I am using can be found at this link. One challenge that I am facing is the need to load close to one hundred 'contentDiv' pages, and I ...
My web page is not displaying my CSS and JavaScript properly when I access it through a folder in the browser. Both files are located within multiple subfolders. I have attempted to rename the files to troubleshoot the issue. <head> <link rel=" ...
I have a YouTube video embedded inside another iframe, but I am facing an issue where the fullscreen feature is not working even after enabling all the required attributes. If the video isn't displaying properly in the code snippet below, you can vie ...
Hello, I am currently navigating the world of Vue for the first time. My project utilizes Vue2, Nuxt, and Vuetify to bring it all together. One thing I am looking to do is create a base .vue component, as well as multiple components that inherit from this ...
I am facing an issue with my AJAX call in communication with my Rails controller. Even though the AJAX call itself seems fine, the callback function does not contain any data. Here is the AJAX request I'm making: $.ajax({ url: '/get_progres ...
Currently implementing bootstrap on a site and seeking to enhance the dropdown menu customization. The default navbar appearance is present, with dropdown elements appearing upon hover. My goal is to include an icon next to each item in the navbar and ha ...
I'm currently in the process of setting up a docker container for running a react app that sends a fetch request to another docker container containing a node server. The deployment is on Ubuntu 16.04, however, after building and deploying the contain ...
I must admit that I am a complete beginner who is feeling lost and unsure of what to do. My goal is to extract 4 pairs of numbers from a webpage using a web scraper. These numbers change when modified on a different page, but I'm unable to pull the d ...
I implemented the code based on RxJS 6 documentation while working with angular 5, RxJS 6 and angularfire2 rc.10. However, I encountered the following error: [ts] property 'pipe' does not exist on type 'OperatorFunction<{}, [{}, user, str ...
Utilizing ReactJS, I am endeavoring to create a secondary (smaller) navbar in the same style as Airtable's product page. My primary navbar is situated at the top and transitions from transparent to dark when scrolled. The secondary bar (highlighted in ...
While developing my mobile application, I am utilizing html5 with node.js to create a chat box for users connected on the same wireless network. However, I encounter an issue when coding on my desktop using node.js software. How can I overcome this challen ...
My experience with Bootstrap 4 on certain pages has been quite challenging, specifically when it comes to aligning fields with labels to the left and maintaining an aligned appearance for input fields. Here is the snippet of my code: <div class="wrap ...
Looking for the best way to execute an AJAX call in a WebForms application? While ASP.NET AJAX components are an option, some may find them a bit heavy compared to the cleaner approach in MVC. Page Methods can be used, but they require static methods ...
An issue has occurred with the type mismatch in the error handling function. It seems that the argument provided is not compatible with the expected parameter type within the Observable structure. GetFullAddress(addressModel: FullAddr ...
There are two buttons, Today and Tomorrow, each with an ng-click function. By default, the button background color is white and text color is red. When the Today button is clicked, the background color changes to blue and the text color changes to white. ...
I have two dropdown lists where I'm trying to pass the selected values for both to another function. I know that the way I am currently doing it is not correct, but I have been staring at this code for so long that I can't seem to find the probab ...
I'm facing an issue with readonly inputs in AngularJS. I have a select element that changes the values of readonly inputs through a script. However, when I attempt to display these values using ng-model in a table as {{ng-model}}, they don't appe ...
I have been deliberating on the correct approach for designing my Angular project. The main entity in this application is an Order. An Order can be used in three different ways: Distribution Assigning Execution My decision was to create three modules: ...
My current stack includes Typescript, Pinia, and Vue3. I have a MenuButton component that I want to be able to pass a Pinia store for managing the menu open state and related actions. There are multiple menus in the application, each using the same store f ...