How to get values from angular custom elements

Asked Mar 26 '19 at 07:19

Active Mar 26 '19 at 07:46

Viewed 419 times

Im having some angular custom elements. I want to create instance of those and get their model values in its parent component. The input, output methods not helping. Could you please suggest me a way. Thanks in advance.

Create Custom ELement

const PopupElement = createCustomElement(PopupComponent, {injector});
customElements.define('popup-element', PopupElement);

The custom element is used in a parent element

const popupEl: NgElement & WithProperties<PopupComponent> = document.createElement('popup-element') as any;

popupEl.addEventListener('closed', () => document.body.removeChild(popupEl));

popupEl.message = message;

document.body.appendChild(popupEl);

Now i want the parent element to get the new value of message.

How to achieve this?

edited Mar 26 '19 at 07:46

asked Mar 26 '19 at 07:19

Stark Buttowski

1,799
2
10
21

Could you show what you have tried so far? – jowey Mar 26 '19 at 07:22
you can use rxjs subject for getting the values. Please check this answer: https://stackoverflow.com/questions/55252637/is-there-a-method-to-do-communication-between-two-components-which-are-not-paren/55253276#55253276 – Yash Rami Mar 26 '19 at 07:22
What are the "custom elements"? – Harun Yilmaz Mar 26 '19 at 07:24
your explanation in not enough. can you explain in details with example? – Bhagwat Tupe Mar 26 '19 at 07:28
https://angularfirebase.com/lessons/sharing-data-between-angular-components-four-methods/ – Nishan Dhungana Mar 26 '19 at 07:44
I think what you are looking for is [Dynamic Component Loader](https://angular.io/guide/dynamic-component-loader). – Harun Yilmaz Mar 26 '19 at 07:54

How to get values from angular custom elements

0 Answers0