custom Webcomponents + Angular

[BasSpruit]

Mijn vraag
Ik heb een webcomponent (geen angular component, maar een pure webcomponent, ook geen polymer) en die heb ik in mijn angular website gehangen. so far so good. het component wordt netjes getoont en reageert ook precies zoals ik verwacht. ik heb hiervoor (gedeeltelijk https://alligator.io/angular/using-custom-elements/) als voorbeeld voor gebruikt.

toen wilde ik gaan databinden... en daar loop ik nu op stuk. Mijn custom webcomponent gebruikt trouwens shadow-dom (geen idee of dat uitmaakt voor dit verhaal)

in mijn JS code (van mijn custom webcomponent) heb ik nu staan

code:

...
this.value = svgElement.innerHTML; 
//console.log(this.value) laat precies zien wat ik wil hebben overigens
this.dispatchEvent(new CustomEvent('valueChange', { bubbles: true, detail: +this.value }));
...

get value() {
 return this.getAttribute('value');
}
set value(newValue) {
 this.setAttribute('value', newValue);
}

Wat ik al gevonden of geprobeerd heb
als ik in mijn angular pagina het event 'valueChange' afvang, dan krijg ik alleen "{ "isTrusted": false }" te zien.
als ik 2way databinding probeer, dan krijg ik hetzelfde te zien.

Als ik hierop probeer te googlen, dan krijg ik alleen maar resultaten te zien over angular components, en die heb ik nu juist niet... (dit is best jammer)
hoe kan ik dit werkend krijgen?

Ik heb later op de avond een oplossing gevonden. Vind het niet helemaal mooi, maar hier is`tie dan toch:

code:

broadcast(e, value) {
        e.preventDefault();
        const event = new CustomEvent('valueChange', {detail: value, bubbles: true, composed: true});
        this.shadowRoot.dispatchEvent(event);
      }

en dan het event afvangen in angular

[ Voor 12% gewijzigd door BasSpruit op 16-11-2018 22:07 ]

[q-enf0rcer.1]

Je zou wellicht doormiddel van https://angular.io/api/core/ViewChild via https://angular.io/api/core/ElementRef (nativeElement) de value van het custom component uit kunnen lezen vanuit de angular method. Dan hoef je zelf niet te werken met een doorgeefluik zoals nu Overigens, is de object referentie wel echt verloren zodra je een web component zijn value attribuut zet? Dat kan ik me namelijk niet zo goed voorstellen. Dus wellicht moet je gewoon de waarde die je doorzet naar het value attribuut, nogmaals loggen in angular. Een andere truc is om in plaats van de directe eindwaarde, het omliggende object door te geven en in een ander attribuut de property die je wilt gebruiken van het object. Op die manier zou je wellicht de object referentie intact kunnen houden.

[BasSpruit]

q-enf0rcer.1 schreef op zaterdag 17 november 2018 @ 11:22:
Je zou wellicht doormiddel van https://angular.io/api/core/ViewChild via https://angular.io/api/core/ElementRef (nativeElement) de value van het custom component uit kunnen lezen vanuit de angular method. Dan hoef je zelf niet te werken met een doorgeefluik zoals nu Overigens, is de object referentie wel echt verloren zodra je een web component zijn value attribuut zet? Dat kan ik me namelijk niet zo goed voorstellen. Dus wellicht moet je gewoon de waarde die je doorzet naar het value attribuut, nogmaals loggen in angular. Een andere truc is om in plaats van de directe eindwaarde, het omliggende object door te geven en in een ander attribuut de property die je wilt gebruiken van het object. Op die manier zou je wellicht de object referentie intact kunnen houden.

Dit heb ik net geprobeerd, en dan heeft de referentie naar mijn custom element niet het attribuut dat ik wil uitlezen (undefined volgens console log). Wat ik nu doe is het event afhandelen in code en daarvan de waarden uitlezen, dat werkt wel.

ik heb, op dit moment, geen idee van waarom het zo werkt. Maar het doet nu wel wat ik wil.

[q-enf0rcer.1]

BasSpruit schreef op maandag 19 november 2018 @ 11:02:
[...]


Dit heb ik net geprobeerd, en dan heeft de referentie naar mijn custom element niet het attribuut dat ik wil uitlezen (undefined volgens console log). Wat ik nu doe is het event afhandelen in code en daarvan de waarden uitlezen, dat werkt wel.

ik heb, op dit moment, geen idee van waarom het zo werkt. Maar het doet nu wel wat ik wil.

Wellicht een bijwerking van shadow DOM. De CSS is volledig geïsoleerd, waarschijnlijk de JS ook?

Je oplossing is er in ieder geval één die ik ook snel had overwogen. Dus ik denk wel dat dit voor nu dan de beste oplossing is aangezien mijn voorgedragen oplossing niet werkt en ik hier verder geen andere mogelijkheden zie langskomen.