как открыть два модальных в одном и том же div в angular 8?

Question

У меня есть DIV и в DIV есть ссылка. Теперь, когда я нажимаю modalA(). Открывается modalA(), modalB() и когда я нажимаю modalB(). Открывается modalB() и modalA(). потому что оба метода находятся в одном и том же div. Поэтому, когда я нажимаю modalA(). Должен открыться только modalA(). Когда я нажимаю modalB(). Он должен открывать только modalB(). пожалуйста, дайте мне ваше предложение.

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

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

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

Answer 1

Использовать event.stopPropagation

Попробуйте так:

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

или

. html

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

.ts

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

Рабочая демонстрация