0

I import a component from external module which have a button.

On button click it does a console.log('test'); So it display 'test' in my console.

It's an external module so i can't access the code of this component. However i know the id of the button element. id='idtest'.

I'd like to open a confirm modal when i click on this button and execute the console.log('test') only if i click on 'ok' button and if i don't confirm, event does not happen.

Every solution, pure js or angular are appreciated.

Ever tried getting the element by id, add onclick and eventlistener and call event.stopPropagation()

2
  • Well, it's an external component. I assume it must implement an OutputEmitter. Because, I can't imagine it to be so poorly developed that it has a console.log message as a default behavior. It's pretty straight-forward working with those.
    – ak.leimrey
    Commented Sep 6, 2018 at 12:04
  • I simplified the problem to be understandable by everyone, offcourse it's another functionnality and i won't use window.confirm in my application. The key question is how to prevent Angular Event from external component DOMElement
    – Nolyurn
    Commented Sep 6, 2018 at 12:08

3 Answers 3

1

You can edit css display none of that button than add another button id=test2 Now, you can write dialog code for that button click event. If the dialog ends with yes, execute button click event

$("#yourhiddenbutton).click()
1
  • I'm sure there is cleaner way but your solution work and can be an option if i have no other one.
    – Nolyurn
    Commented Sep 6, 2018 at 12:09
0

You can use query selector to get hold of the button and add a listener on the click event.

document.querySelector('#idtest').addEventListener('click', function(){})

2
  • It does not tell me how to prevent angular event which is the main topic here.
    – Nolyurn
    Commented Sep 6, 2018 at 11:53
  • Oh okay. You can hide the button , add a clone of the button instead and on its click force the click event on the original button from your script as it is mentioned in the upvoted answer. Thanks!
    – Saurav
    Commented Sep 6, 2018 at 17:10
0

I would suggest using @ViewChild and then to something like this...

template: "<app-component #component></app-component>"

@ViewChild('component') public component: any

this.component.event.stopPropagation();

Since I don't know how that external component looks like, I can't offer you a better solution.

EDIT: However, it many cases it can lead to some nasty console errors and I wouldn't encourage using this. There rarely is a reason to stop a component from emitting the event. If the component doesn't suit your needs, you should prefer to use something else instead.

2
  • It would be long to explain, but i'm in a professionnal context, i must use this component, it is used by many team and i have a specific need to add a confirm modal on an event of this component
    – Nolyurn
    Commented Sep 6, 2018 at 12:41
  • Then indeed, I would suggest you go with @ViewChild. It's a pretty clean and angular way to get a specific dom object and get access to its contents. Overall, I would probably still go with upvoted solution. Might feel hackish, but it requires less meddling with the DOM
    – ak.leimrey
    Commented Sep 6, 2018 at 12:45

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.