Shared data between Angular Elements

Question

I'm look into Angular Elements and thinking of generate our Angular Components into Angular Elements to make it possible to be used outside Angular applications.

Let's say I got a Angular 4 app which imports two different Angular Elements (built in Angular 7) and render them on the same page and I instantiate a service in my Angular 4 component. That service contains data that I want to pass into my Angular Elements, since web components only accepts strings as attributes (inputs), is there any good way for sharing data between/pass the instance of the service into the Angular Elements?

*is there any good way...?* What *way* have you tried so far? — R. Richards, Nov 21 '18 at 18:38
one way to go for it microfront end application. that was there is no limitation. check the Singale SPA examples. [link](https://single-spa.js.org/) — Aji, Nov 21 '18 at 18:42
my suggestion would be create a reusable api to communicate between two applications like an observer pattern. I have created a common library using rxjs subject to communicate between two micro front end applications(Angular,Vue,Angular Js) side by side — Jameel Moideen, Nov 21 '18 at 18:43
here is the code https://stackoverflow.com/questions/53397918/passing-param-to-ngoninit-through-service/53415445#53415445 , you can use the same library on your case also — Jameel Moideen, Nov 21 '18 at 18:46

score 4 · Accepted Answer · answered Nov 24 '18 at 19:50

4

According to the latests talks on angular elements you will be able to pass in an injector when creating the element.

This shared injector will then act as the bridge between the different elements.

answered Nov 24 '18 at 19:50

Leon Radley

7,596
5
35
54

1

U have any resources? – Andre Elrico Mar 08 '19 at 22:34
You can see example code here: https://angularfirebase.com/lessons/angular-elements-advanced-techniques/ – Peter Drinnan Mar 09 '19 at 15:22
@PeterDrinnan sadly it throws 404. Any updated links? – DARKGuy Jul 25 '21 at 08:46
@DARKGuy Here's the updated link - https://fireship.io/lessons/angular-elements-quick-start-guide/ – batbrain9392 Aug 18 '21 at 09:42

score 0 · Answer 2 · answered Mar 13 '20 at 10:23

You are trying to use two Angular Custom Element in your Angular Application. Applying the principle of Micro Front Ends in this scenario, the two applications should be as independent as possible. Today you are using Angular Element tomorrow you might use web component (Custom Element) created using some other technology, even if some backed in feature of Angular does solve this issue, you might be stuck with Angular Elements forever and won't be able to use other technologies.

Whatever solution use chose it should be as scalable and robust as possible.

My Advice would be using one of the following:

1.Communication via Event Bus. 2. Passing Routing Params, those params can be used to fetch data from the backend. 3.Centralized Global Store (Redux, NGRX, MOBx)

All the best.

Shared data between Angular Elements

2 Answers2