How to disable custom event at library component?

Question

There is a switcher component from ux-components library that allows several events to be processed. One of those event handlers is called onValueChange. I want to prevent the default behavior and disable that event from triggering at all.

I tried some of the js methods, such as preventDefault(). It seems like it won't work with custom events.

This is my component that has the onValueChange event.

<ux-switcher-field 
  (onValueChange) = "someFunc()" >
</ux-switcher-field>

This is the event emitter:

@Output()
public onValueChange = new EventEmitter<UxValueChangeEvent<T>>();

And as I said, I want just to disable that event from triggering in one specific place.

@ArtemArkhipov yes, but that component is used not once. So I can't change that — tak tigry ne rychat, Aug 20 '19 at 08:35
Can you just pass a noop function to it? I think result will be the same - no further reaction to an event. — Artem Arkhipov, Aug 20 '19 at 08:39
@ArtemArkhipov it seems like it's not working too. If I get it correctly - noop is a empty function, right? — tak tigry ne rychat, Aug 20 '19 at 10:01

score 0 · Answer 1 · answered Aug 20 '19 at 08:34

0

You can use event.preventDefault() like this in template

<ux-switcher-field 
  (onValueChange) = "$event.preventDefault()" >
</ux-switcher-field>

answered Aug 20 '19 at 08:34

Barkha

702
3
8

Yea, I tried that. It's not working at all. It seems like it won't work with custom events – tak tigry ne rychat Aug 20 '19 at 08:37
I tried similar thing on a small example and it worked – Barkha Aug 20 '19 at 08:39
It also logging ERROR TypeError: $event.preventDefault is not a function – tak tigry ne rychat Aug 20 '19 at 09:52
can you share a small stackblitz with an example having the same issue as it is working for me – Barkha Aug 20 '19 at 10:25
I would love to, really. But it's a part of a product and counts as a trade secret :( – tak tigry ne rychat Aug 20 '19 at 11:15

score -1 · Answer 2 · answered Aug 20 '19 at 08:39

-1

You can use $event.stopPropagation() to cancel the event.

The code should look as bellow:

<ux-switcher-field 
  (onValueChange) = "$event.stopPropagation()" >
</ux-switcher-field>

more details about stopPropagation you can read here:

stopPropagation description

answered Aug 20 '19 at 08:39

bat7

836
1
8
22

It's the same error, as preventDefault() - ERROR TypeError: $event.stopPropagation is not a function – tak tigry ne rychat Aug 20 '19 at 10:03

How to disable custom event at library component?

2 Answers2