Call javascript function when closing ngbdropdownmenu angular

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 class="col">
      <ul
        class="nav navbar-nav float-right"
      >
        <li class="dropdown-user nav-item" ngbDropdown>
          <a class="nav-link" ngbDropdownToggle>
            <div class="icon-wrapper">
              <fa-icon
                [icon]="faBell"
              ></fa-icon>
              <span class="badge">{{this.unreadAlerts.length}}</span>
            </div>
          </a>
          <div
            ngbDropdownMenu
            class="dropdown-menu-notification dropdown-menu-right"
          >
            <ng-container *ngIf="this.alerts.length == 0">
              <a class="dropdown-item">
                No alerts
              </a>
            </ng-container>
            <ng-container *ngFor="let alert of this.alerts">
              <a class="dropdown-item-notification">
                <div class="row">
                  <div class="col">
                    <b *ngIf="alert.read == false">{{alert.name}}</b>
                    <h6 *ngIf="alert.read == true">
                      {{alert.name}}
                    </h6>
                  </div>
                </div>
                <div class="row">
                    <p>{{alert.description}}</p>
                </div>
              </a>
              <div class="dropdown-divider"></div>
            </ng-container>
          </div>
        </li>
      </ul>
    </div>

Answer

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..
}

Advertisement

Answer