Reputation: 415
I made a whole li element clickable by making use of anchor tag as such:
<li *ngIf="notification.payload.table">
<a class="d-flex justify-content-between" (click)="updateTableNotificationReadStatus(notification)">
<div class="d-flex flex-column">
<span style="font-size: 1.1rem">
<strong>{{notification.payload.username}}</strong> requested access for table - {{notification.payload.table}}.
<span style="font-size: 0.9rem">{{notification.payload.time}}</span>
</span>
<span *ngIf="notification.payload.note"class="note">
<span class="noteLabel">Note</span>
<span> This is a note attached to it</span>
</span>
</div>
<span>
<fa-icon [icon]="faClose" class="ml-auto" (click)="deleteNotification(notification)"></fa-icon>
</span>
</a>
</li>
When I click on the fa-icon, the notification is getting deleted but I am also getting redirected to another page because of the function in which I doesn't want?
How can I make the close icon clickable without getting redirected while being on the same element?
Upvotes: 0
Views: 2153
Reputation: 415
I achieved that using:
deleteNotification(e, notification) {
e.stopPropagation();
}
Upvotes: 1
Reputation: 1082
It seems to me that you need something similar to this question AngularJS ng-click stopPropagation
To stop propagating the event
$event.stopPropagation();
Upvotes: 2