CODEWITHSUNDEEP
angularangular7angular-elements
bjorkblom
bjorkblom

Reputation: 1959

Shared data between Angular Elements

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?

Upvotes: 6

Views: 2481

Answers (2)

Akshay Rajput
Akshay Rajput

Reputation: 2078

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.

Upvotes: 0

Leon Radley
Leon Radley

Reputation: 7682

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.

Upvotes: 4

Related Questions