如何在 angular 8 的同一个 div 中打开两个模态？

Question

I have a DIV and in the div, there is a link. Now when I click modalA() . It opens modalA() , modalB() and when I click modalB() . It opens modalB() and modalA() . because Both methods are in the same div. So When I click modalA() . It should open modalA() only. When I click modalB() . It should open modalB() only. please give me your suggesstion.

<div class="a" (click)="modalA()">
  <a (click)="modalB()"> </a>
</div>

modalA() {
  console.log('A modal');
}

modalB() {
  console.log('B modal');
}

Answer 1

Use event.stopPropagation

Try like this:

modalB() {
  window.event.stopPropagation();
  console.log("B modal");
}

or,

.html

<div class="a" (click)="modalA()"> aaaa
  <a (click)="modalB($event)">bbbb </a>
</div>

.ts

modalB(evt) {
  evt.stopPropagation();
  console.log("B modal");
}

Working Demo