Search code examples
htmlangularcustom-element

Custom HTML Element: on-accept attribute

Im having a little trouble with a Custom HTML Element when using it inside Angular.

When adding the custom html element like this:

<custom-element *ngIf="something == false" 
    application-name="CUSTOM_NAME" 
    another-attribute="SOME_LINK">
</custom-element>

I can see the element in the DOM just fine, and it has 2 attributes:

application-name and another-attribute

However, if I add another attribute called on-accept, I assume, that the third attribute is turned into an event, as I cannot see all 3 attributes in the DOM.

<custom-element *ngIf="something == false" 
    application-name="CUSTOM_NAME" 
    another-attribute="SOME_LINK" 
    on-accept="SOME_EVENT">
</custom-element>

when doing an ng-serve, it gives me this Error:

ERROR in src/app/components/main/main.component.html:5:118 - error TS2339: Property 'SOME_EVENT'
does not exist on type 'MainComponent'.

5 <custom-element *ngIf="something == false" application-name="CUSTOM_NAME" policy-link="SOME_LINK" 
on-accept="SOME_EVENT" ></custom-element>

When I rename on-accept to onAccept it works just fine.

Note: I want to decouple my custom HTML element from Angular completely as I would also like to use it in other apps aswell. And I want to use an attribute called on-accept, but apparently i cannot use custom attribute on-accept on my custom element, when inside an Angular app... This makes it non-reusable.

If I use my custom element in some plain HTML file, I get expected bahaviour, and it shows me an element with 3 custom attributes:

application-name, another-attribute and on-accept

Why can I not use an attribute called on-accept within my Angular App?

Solution

  • In angular templates: on-xy="..." is like (xy)="..." , so on-accept="yourMethod()" is like (accept)="yourMethod()"

    Your "SOME_EVENT" should be an existing function in your component. Try this:

    MainComponent: 

    onAcceptEvent(evt) { console.info(evt); }

    Template:

    <custom-element *ngIf="something == false" on-accept="onAcceptEvent($event)" ></custom-element>