Interacting between two Angular 4 applications

I came across solutions here and here related to this issue, but they seem to be for an older beta version of Angular (I believe now we should bootstrap a module, not a component; also, I couldn't find the bootstrap function in the documentation for version 4).

I also stumbled upon an article that references an interesting comment in the GitHub source code. The part that caught my attention is

For this reason, Angular creates exactly one global platform object which stores all shared services, and each angular application injector has the platform injector as its parent.

Finally, I have some questions: What would be the most effective approach for communication between multiple apps on the same page? How can we ensure a certain order of bootstrapping for these different apps?

angular

Answer №1

There are various ways to solve this issue. One simple solution suggested is to include a global on the page and utilize getters and setters that trigger events, notifying other applications of any changes. Alternatively, if you are familiar with observables, you can implement those.

If you opt for this approach, it may be beneficial to explore localStorage, which serves a similar purpose as the aforementioned solution but also allows communication between different tabs or windows. Additionally, localStorage enables data retention across sessions. If session-specific storage is needed, sessionStorage can be used instead.

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

I am having trouble loading the component; please direct me to the login page

Utilizing Angular 7 to develop an admin dashboard, I encountered an issue with the home page. The home page is supposed to load before logging in, but it only works after logging in. Prior to logging in, the page briefly appears for a second and then autom ...

angular routes

An issue has occurred: Cannot access the properties of an undefined object (specifically 'controls')

I encountered an error message stating "TypeError: Cannot read property 'controls' of undefined" in the code that I am not familiar with. My goal is to identify the source of this error. Below is the HTML code snippet from my webpage: <div ...

javascript angular

How Angular services transmit information to components

I have implemented a search field within my top-bar component and I am facing an issue in passing the input value of that search field to another component. Design Search service Top bar component Result component Operation Top bar component receives th ...

javascript angular typescript

Optimizing Angular Performance with Trackby in Dual Lists

How can I write two ngFor lists with trackby to prevent elements from being recreated when moving between the lists? I know that trackby helps in avoiding recreation of elements within a single list, but is there a way to achieve this across multiple list ...

angular ngfor

Retrieving information from a JSON object in Angular using a specific key

After receiving JSON data from the server, I currently have a variable public checkId: any = 54 How can I extract the data corresponding to ID = 54 from the provided JSON below? I am specifically looking to extract the values associated with KEY 54 " ...

javascript arrays json angular typescript

Angular displays RouterLink as regular text

I am currently learning Angular and encountering an issue with the routerLink attribute in my <a> tag. When I add the routerLink, it changes to text and becomes unclickable. Can anyone help me identify what is causing this problem? Here is a snippet ...

angular

Navigating with Angular 2: Expressing HTML 5 Routing Challenges

I'm currently working on a simple web application using Express 4 and Angular 2. The only Angular 2 specific aspect in this project is the utilization of its HTML5 router. Let me walk you through how the routing works in this app: There are two prim ...

javascript node.js express routes angular

Patience required for Angular to retrieve data from API call

I am currently struggling with getting my Donut chart to load properly with data returned from three separate API calls. I have initialized the chart and the API call functions in ngOninit(). However, it seems like my chart is not loading. I understand tha ...

angular donut-chart

Create an interactive slider using only images in an Ionic Angular content display

I need help transforming the images from WordPress into a slider instead of showing them individually. How can I achieve this? <ion-content padding> <div *ngIf="selectedItem" class="selection"> <h2 [innerHTML]="selectedItem.title.rend ...

angular ionic-framework

After extraction from local storage, the type assertion is failing to work properly

I have a unique situation in my Angular project where I have stored an array of data points in the local storage. To handle this data, I have created a custom class as follows: export class Datapoint { id: number; name: string; // ... additional pr ...

angular typescript type-assertion

Having trouble connecting to the API due to the error "No Access-Control-Allow-Origin" in Angular 2

I am new to working with Angular2 and I'm currently facing a challenge in implementing authentication for an app using username and password login credentials. Unfortunately, I keep encountering the error message "No Access-Control-Allow-Origin". htt ...

angular

Setting up a .NetCore3.1 API on LinuxCentos with Nginx

Currently, I am facing an issue while attempting to deploy a .NET Core 3.1 API + Angular application on Linux Centos. The application runs fine on the server; however, the browser fails to load it properly. Surprisingly, when I publish the same project for ...

angular api nginx deployment centos

Angular SwiperJs integration: smoothly move three slides with a single click

I am currently utilizing the SwiperJs library in conjunction with Angular. I am interested in adding a feature where clicking will navigate to the next (or previous) 3 slides instead of just 1 slide. The regular arrows function correctly, with this code ...

angular swiper.js

Increase the size of the angular material accordion

I am dealing with a situation where I have 2 different accordion components on the same page. Each accordion contains multiple expansion panels. My challenge is to close all expanded panels from both accordions and only open the currently selected expans ...

angular angular-material

Angular - personalized modal HTML

I am facing a challenge where I need to trigger a popup when a button is clicked. There can be multiple buttons, each with its own overlay popup, and these popups should close when clicking outside of them. Currently, I am using TemplateRef (#toggleButton ...

angular typescript dom binding click

Set the variable value by clicking on another component within *ngFor in Angular 2

I am attempting to use *ngFor to pass an object to another component, but only the last object in the table is being passed. The object that was clicked should be displayed instead. How can I solve this issue? <tr data-toggle="control-sidebar" *ngFor=" ...

angular input selector ngfor pass-data

The Ngrx action fails to finish despite encountering an error during execution

An Issue with Action Completion Post-Error Within my application, I have implemented an action for deleting a user. Prior to deletion, the user is prompted on screen with a Dialog to input the administrator password. If the correct password is provided, t ...

angular typescript redux ngrx

Error Encountered: Kendo Angular 4 Peer Dependency Issue and Module "rxjs/operators/combineLatest" Not Found

I'm currently facing issues while attempting to integrate Kendo UI into an Angular 4 application, encountering various errors along the way. To begin, I initiated the installation by running this command: npm install --save @progress/kendo-angular-d ...

angular npm kendo-ui .net-core kendo-ui-angular2

With *ngFor in Angular, radio buttons are designed so that only one can be selected

My goal is to create a questionnaire form with various questions and multiple choice options using radio buttons. All the questions and options are stored in a json file. To display these questions and options, I am utilizing nested ngFor loops to differ ...

html json angular radio-button ngfor

Hovering over the Chart.js tooltip does not display the labels as expected

How can I show the numberValue value as a label on hover over the bar chart? Despite trying various methods, nothing seems to appear when hovering over the bars. Below is the code snippet: getBarChart() { this.http.get(API).subscribe({ next: (d ...

angular typescript chart.js

Newtab Q&A