Czasami potrzebujemy zapobiec propagacji po kliknięciu w linki. Np w ostatnim projekcie miałem do zakodowania przypadek gdzie klikanie w dane punkty ma otwierać jakiś box, przy czym klient wymagał aby klikając w tło, zamykać już istniejące. Ok można użyć (click)=”closeBoxes()” na elemencie div rodzica ale wtedy klikając w w/w punkty, wykonują się dwa kliknięcia. Pierwsze do otworzenia boxa a drugie do jego zamknięcia. Efektem jest to że nie zauważymy nic.

Jest na to rowziązanie. Trzeba zatrzymać propagację – sorry za tłumaczenie 🙂

Mamy strukturę w template:

<div class="container" (click)="closeBoxes()">
        <a class="container-box-button" (click)="toggleOpen()">Open/Close</a>
        <div class="container-box-content" *ngIf="isVisibleBox">Content</div>
</div>

Rozwiązanie tego problemu jest przekazanie parametru $event

<div class="container" (click)="closeBoxes()">
        <a class="container-box-button" (click)="toggleOpen($event)">Open/Close</a>
        <div class="container-box-content" *ngIf="isVisibleBox">Content</div>
</div>

Oraz w metodzie użycie tego parametru.

toggleOpen(e:Event) {
    e.stopPropagation();
    isVisibleBox =!isVisibleBox;
}

I to tyle powinno wystarczyc 🙂