I am implementing an alert/notification dropdown in my angular app. I have got the alerts to display when clicking on the icon, however I am now trying to update the ones that have been read (unread are shown in bold).
For example, when opening the app, it might show the number 2 on the icon (as 2 alerts are unread). When the notification icon is clicked and the alert menu is shown, then closed (or clicked off), i want to change them all to read by calling a function, and then remove the number 2 on the alerts icon by updating the div (is there a way to do this without refreshing the whole page?). Does anyone know how i can do this?
Thanks in advance!
Below if my code so far:
<div >
<ul
>
<li ngbDropdown>
<a ngbDropdownToggle>
<div >
<fa-icon
[icon]="faBell"
></fa-icon>
<span >{{this.unreadAlerts.length}}</span>
</div>
</a>
<div
ngbDropdownMenu
>
<ng-container *ngIf="this.alerts.length == 0">
<a >
No alerts
</a>
</ng-container>
<ng-container *ngFor="let alert of this.alerts">
<a >
<div >
<div >
<b *ngIf="alert.read == false">{{alert.name}}</b>
<h6 *ngIf="alert.read == true">
{{alert.name}}
</h6>
</div>
</div>
<div >
<p>{{alert.description}}</p>
</div>
</a>
<div ></div>
</ng-container>
</div>
</li>
</ul>
</div>
CodePudding user response:
A ngbDropDownMenu has a method openChange
(see the "Outputs" in the doc -the outputs are the "events" you can capture-)
Some like
<div ngbDropdownMenu (openChange)="openClose($event)">
execute a function defined in your .ts
openClose(open:boolean)
{
if (open)
..do something..
else
..do something..
}
You can also, if only interesting in close make some like
<div ngbDropdownMenu (openChange)="!$event && close()">
The function "close" only execute when $event is false -when is closed-
close(){
..execute something..
}