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

Troubleshooting: Ngx-Echarts Animation Issue at Startup

I've been working on integrating ngx echarts into my Angular app, but I'm facing an issue with the animation during the initial load of the chart. Take a look at this Stackblitz example where you can see that the bars render quickly on initial lo ...

What is the best way to set a boolean value for a checkbox in a React project with Typescript?

Currently, I am working on a project involving a to-do list and I am facing an issue with assigning a boolean value to my checkbox. After array mapping my to-dos, the checkbox object displays 'on' when it is unchecked and a 'Synthetic Base E ...

Using Angular to Apply a Custom Validation Condition on a FormGroup Nested Within Another FormGroup

I am facing an issue with my form validation logic. I have a set of checkboxes that need to be validated only when a specific value is selected from a dropdown. The current validator checks the checkboxes regardless of the dropdown value. Here's the c ...

Having trouble retrieving information from Node.js service in AngularJS 2

I am currently expanding my knowledge of Angular and attempting to retrieve data from a node js service using Angular 2 services. When I access the node js services directly from the browser, I can see the results. However, when I attempt to fetch the dat ...

Forwarding routes with Angular Router

My server has specific mappings for different URLs: / serves an Angular application with routing capabilities /admin serves a Django control panel for staff database updates /api and /api/... serve REST endpoints to handle queries and return JSON data I ...

"Encountering an unmet peer dependency error while trying to set up Angular2 through the package.json

Suppose I have a fresh project with the following package.json setup: { "name": "EmptyNG2", "version": "1.0.0", "description": "Empty Description", "repository": {}, "dependencies": { "angular2": "^2.0.0-beta.17" }, "author": "me", "li ...

Can you explain how to utilize multiple spread props within a React component?

I'm currently working in TypeScript and I have a situation where I need to pass two objects as props to my React component. Through my research, I found out that I can do this by writing: <MyComponent {...obj1} {...obj2} /> However, I'm fa ...

What is the best way to retrieve organized data from a mat-table spanning multiple pages?

Is there a way to extract sorted data from the dataSource of a mat-table and save it as sortedData in order to export it to a CSV file? The dataSource has filters and pagination applied through this.dataSource.filterPredicate; this.dataSource.paginator = t ...

Expanding unfamiliar categories

Currently, I am working with Gutenberg blocks in a headless manner. Each Gutenberg block is defined by the following structure: type Block = { name: string; className?: string; key?: string | number; clientId: string; innerBlocks: Block ...

Combining existing CSS classes with node labels in Cytoscape JS for Angular: A Guide

My project follows a consistent CSS theme, but the node's CSS style doesn't match. I'm looking to adjust the label colors in the CSS based on whether it's day mode or night mode. How can I accomplish this? this.cy = cytoscape({ con ...

Oops! The 'map' property cannot be found in the type 'Observable<User>'

In my online shopping project that combines Angular and Firebase, I implemented the AuthGuard to verify user login status before accessing various links including ./check-out. However, I encountered an issue with importing map for Observable.User. All comp ...

Removing punctuation from time duration using Moment.js duration format can be achieved through a simple process

Currently, I am utilizing the moment duration format library to calculate the total duration of time. It is working as expected, but a slight issue arises when the time duration exceeds 4 digits - it automatically adds a comma in the hours section (similar ...

Why has Jasmine decided not to wait for my promises to finish?

Utilizing the FileSystem API to generate a directory with 2 entries for a test, I am facing an issue where Jasmine does not wait for the promise to resolve before executing the test, resulting in failure. Despite using the async wrapper, the problem persis ...

Enforcing alias types in TypeScript arguments is necessary for maintaining consistency and clarity

I'm currently facing a challenge with type unions and aliases. I have an alias for values that can possibly be null or undefined, along with a function that handles these values. Everything is running smoothly and safely. However, there are instances ...

Position Bootstrap Modal in the center horizontally

I am working on an Angular project and struggling to center my Bootstrap 3 Modal horizontally on the screen. Despite trying various solutions like using text-align: center and align = "center", I have been unsuccessful. Can someone guide me on how to prope ...

Is the window.location.href of a component not inside a router-outlet updated after a router redirect through a guard?

The navigation component I have is positioned outside of the router. It utilizes a reusable icon component that depends on absolute URLs to point to SVG icons, retrieved through a getter within the component: public get absUrl(): string { return windo ...

Props used in styled components are effective, although they may trigger a warning message stating, "Warning: Received `true` for a non-boolean attribute `cen`."

Caution: A non-boolean attribute "cen" received a value of "true". If you intend to render it in the DOM, provide a string instead: cen="true" or cen={value.toString()}. While using Props in Styled-Component with TypeScript and Material-UI, everything func ...

Issue with TypeScript Generics: The operand on the left side of the arithmetic operation must be of type 'any', 'number', or 'bigint'

I seem to be encountering an error that I can't quite decipher. Even though I've clearly set the type of first as a number, the code still doesn't seem to work properly. Can someone provide insights on how to fix this issue? function divide& ...

Can you please provide a step-by-step guide for using socket.io with TypeScript and webpack, after installing it

Currently, I am experimenting with TypeScript in conjunction with node.js, socket.io, and webpack. To facilitate this setup, I have configured the webpack.config.js, tsconfig.json, and tsd.json files. Additionally, I acquired the typings file for socket.i ...

Navigating away from the IdentityServer page within the Angular SPA in an ASP.NET Core application triggers a refresh of the entire

My ASP.NET Core Angular SPA app is integrated with IdentityServer 4. Whenever I navigate to the Identity pages (such as Manage Account) and then return to my app (by clicking the Home link or Back button), the website reloads. Is this normal behavior? Can ...