What's causing the subscription feature to malfunction in a fresh browser tab?

I am facing an issue with camera entries on an angular website. Whenever I click on an entry, a new window opens to display the camera livestream. However, I am having trouble with the subscribe functionality.

Important note: Once the window is open, subsequent clicks on the list should not create new windows but rather add the livestreams to the existing window.

When I click, I first open the window and then trigger my service method. But for some reason, the subscribe in the OnInit() method does not work.

OnClick:

this.externalWindow = window.open(
          '/livesplit',
          '',
          'width=' + window.innerWidth + ',height=' + window.innerHeight
        );
//call service to add a cameraconfig
this.settingsService.changeCurrentCameraLivesplit(result);

OnInit in the opened component:

this.settingsService.currentCameraLivesplit.subscribe(currentCameraLivesplit => {
//this is never hit..
      if (currentCameraLivesplit) {
       this.currentcameraList.push(currentCameraLivesplit );
      }
    });

My Service:

  private cameraLivesplitSource = new BehaviorSubject(null);
  currentCameraLivesplit = this.cameraLivesplitSource.asObservable();

  changeCurrentCameraLivesplit(currentCameraLivesplit: CameraConfig[]) {
    this.cameraLivesplitSource.next(currentCameraLivesplit);
  }

Can anyone spot what mistake I might be making?

Additional info: The service is added in the app.module.ts under providers

I attempted to create a Stackblitz(example string should be included under the "add" button in the second window [only click the "add" button in the first window!])

Stackblitz editor: https://stackblitz.com/edit/angular-k9h1mn

Stackblitz app:

Answer №1

After countless attempts, it became evident to me that observable/subscribe does not function as expected with an external window. However, I am sharing my successful workaround here for the benefit of others facing a similar issue:

To begin, I open a new window:

let externalWindow = window.open(
   '/livesplit',
   '',
   'width=' + window.innerWidth + ',height=' + window.innerHeight
);

Next, trigger the event:

externalWindow.dispatchEvent(new CustomEvent('eventname', {detail: 'data to send'}));

In the window's component:

@HostListener('window:eventname', ['$event'])
    testListener(event) {
      console.log(event.deatil);
    }

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

Tips for applying personalized CSS to individual Toast notifications in Angular

MY QUESTION : I am looking to customize the CSS of a single toast used in Angular components. While there may be multiple toasts, I specifically want to style one particular toast differently. For example, the toast image can be viewed here: example toast ...

Frequent occurrence when a variable is utilized prior to being assigned

I am currently working with a module import pino, { Logger } from 'pino'; let logger: Logger; if (process.env.NODE_ENV === 'production') { const dest = pino.extreme(); logger = pino(dest); } if (process.env.NODE_ENV === &apo ...

Incorporating external Angular 4 components within my custom components

For my project, I am attempting to incorporate jqWidgets Angular components: import { Component, ViewChild } from '@angular/core'; import 'jqwidgets-framework'; import { jqxTreeComponent } from "jqwidgets-framework/jqwidgets-ts/angula ...

Create a series of buttons in Angular 2 that are linked to components with a click event

I am facing an issue with a component that generates a list of buttons, where I want to connect the click event to show a child component. The problem is that my current implementation using a local variable causes all buttons to display the last child com ...

Why is Axios not being successfully registered as a global variable in this particular Vue application?

Recently, I have been delving into building a Single Page Application using Vue 3, TypeScript, and tapping into The Movie Database (TMDB) API. One of the hurdles I faced was managing Axios instances across multiple components. Initially, I imported Axios ...

Troubleshooting a NextJs/TS problem with importing ESM modules

Click here for the Code Sandbox I'm currently in the process of transitioning some code to NextJS 11 / Webpack 5, including certain modules that now exclusively support ECMAScript Modules (esm). Prior to the upgrade, I could easily export all files ...

What is the best way to display the complete text or wrap a menu item in an Angular Material menu?

Is it possible to display the full text of a menu item instead of automatically converting it to ellipses or breaking the word? I've tried various CSS methods without success. Any suggestions? https://i.stack.imgur.com/3l7gE.png #html code <mat-m ...

Creating conditional keys using the Zod library based on the value of another key

Incorporating the TMDB API into my project, I am making an effort to enhance type safety by reinforcing some of the TypeScript concepts I am learning. To achieve this, I am utilizing Zod to define the structure of the data returned by the API. Upon invest ...

What is the best way to change an existing boolean value in Prisma using MongoDB?

Exploring prisma with mongoDb for the first time and faced a challenge. I need to update a boolean value in a collection but struggling to find the right query to switch it between true and false... :( const updateUser = await prisma.user.update({ where: ...

Using `setTimeout` in a recursive function that is nested within another function

I am attempting to use setTimeout in a recursive function call where the main function is called recursively and subfunctions are also called recursively. Below is the code I am working on: this.myArray = Array(2).fill(undefined); StartFunction(len: numb ...

The issue with zone.js remains unresolved

Since updating to the most recent version of Angular cli, I have encountered an error when trying to run ng serve: ./node_modules/@angular-devkit/build-angular/src/webpack/es5-polyfills.js:106:0-37 - Error: Module not found: Error: Can't resolve &apo ...

Experimenting with a Collection of Items - Jest

I need to conduct a test on an array of objects. During the test coverage analysis of the displayed array, I found that the last object with the key link has certain conditions that are not covered. export const relatedServicesList: IRelatedServiceItem[ ...

Experiencing difficulty retrieving individual :id information from a list in MEAN stack

**I'm experiencing issues retrieving a single :id from a list as the data returned is not what I expected... ** GET /article/5b0be8829f734a4e580a43c5 401 3.845 ms - 99 ===> response from my get request my api ===> var express = require ...

Tips for Retrieving Information from Firebase in an Angular Application

I am facing an issue with my code where the ngFor directive is not working as expected when I use read_CheckOuts to return data from the database. Below are snippets of my code: crud.service.ts import { AngularFireDatabase} from '@angular/fire/datab ...

Exploring the filter method in arrays to selectively print specific values of an object

const array = [ { value: "Value one", label: "Value at one" }, { value: "Value 2", label: "Value at 2" }, { value: "" , label: "Value at 3" } ...

Angularfire2: Access Denied Error When User Logs Out

When utilizing the following method: login() { this.afAuth.auth.signInWithPopup(new firebase.auth.GoogleAuthProvider()) .then(() => { this.router.navigate(['']); }); } An error occurs during logout: zone.js:915 Unca ...

Employing Google Fonts in Angular results in a network error with codes [_ngcontent-X];400[_ngcontent-X];600[_ngcontent-X]

I have been encountering numerous network errors similar to the following: > Request URL: https://fonts.googleapis.com/css2?family=Source+Sans+Pro:wght@200;300[_ngcontent-c6];400[_ngcontent-c6];600[_ngcontent-c6];700&display=swap > Reques ...

Tips for implementing lazy loading for a section of a template in Angular 2

I have an Angular 2 component that has several sub-components within it. Some of these sub-components are expensive to load and may not always be necessary, especially if the user doesn't scroll far enough down the page. Although I am familiar with l ...

Making an Angular POST request and then navigating to a new component

Hello, I am a beginner in Angular and struggling to make my code work. It seems like a basic functionality issue that I can't seem to figure out. My goal is to send a post request to my .NET core API to register a user, and once that is done, navigat ...

The argument passed to the AsyncPipe is not valid: '[object Object]'

Provided as shown below: public currentDBUserBS$: any; constructor(private afDb: AngularFireDatabase){} fetchUser(uid){ this.afDb.object(`users/${uid}`).valueChanges().subscribe((dUser) => { if (dUser) { this.currentDBUserBS$ = dUser; ...