0

I have a custom modal component which is responsible to display overlay(modal-popup) which contains carousel.

Problem : As you can see in below code, outer div contains (click) event to close the overlay (I dont have Header part in overlay). 

<div class="modal fade" id="myModal" (click)="hide($event)">              
          ...
          ...   

    <a  class="left carousel-control" href="#myCarousel" role="button" data-slide="next">
          <span class="sr-only">next</span>
     </a>

</div>

So when I click a tag, it hides overlay too. If I remove click event, carousel works fine.

To solve the problem, I've attached (click)="stoppropogation($event);false" to a tag to stop event propagation. Now clicking a tag doesn't hide overlay but it doesn't even show next picture.

Here is my code,

<div class="modal fade" id="myModal" (click)="hide($event)">

          ...
          ...

          <a  (click)="stoppropogation($event);false" id="next"  role="button" data-slide="next">
            <span class="sr-only">Next</span>
          </a>

</div>



stoppropogation(event:any){
    event.stopPropagation();
    document.getElementById("next").href="#myCarousel";
}

Any easy solution?

micronyks
  • 54,797
  • 15
  • 112
  • 146
  • If you put `false` in the tag, it will both `stopPropogation` and `preventDefault`, can you remove the false and try again? :/ – eko Jan 08 '17 at 09:10
  • I tried it that way too but it doesn't work. – micronyks Jan 08 '17 at 09:11
  • What happens with only `stopPropogation` ? – eko Jan 08 '17 at 09:12
  • It doesn't stop bubbling of an event. – micronyks Jan 08 '17 at 09:13
  • I ended up using jquery which is not good. but its works. – micronyks Jan 08 '17 at 09:14
  • I tried to reproduce the issue with a smaller example in case someone want to play around: https://plnkr.co/edit/rMxQpsxPrBFRojne6LuK?p=preview if you click on next inside the modal the wrapper divs alert doesn't pop up as expected but not sure how yours doesn't work :/ – eko Jan 08 '17 at 09:29

0 Answers0