Creo una función de eliminación para una lista de notificaciones, pero antes de que se ejecute, la lista desplegable se cierra y no puedo encontrar una solución a este problema.

componente.ts:

 clearNotification( idx ){ console.log('estas emitiendo esto 1', idx) this._notificationsService.markNotificationsAsReaded(this.notification).then(res=>{ this._notificationsService.deleteNotific(res) })

servicio.ts:

 deleteNotific(notif: Notification){ let eliminar= this.notifications.findIndex(i => i.id == notif.id); if(eliminar > -1){ this.notifications.splice(eliminar , 1 ); this.notificationsList.next(this.notifications); console.log('Borrando Notificacion 4') } return this.notifications; }

componente.html:

 <!-- notice --> <div class="notification notice" [ngClass]="{ 'notice-warning': notification.notification_type_id!=61, 'notice-danger': notification.notification_type_id==61, 'not_view': !notification.datetime_view, 'view': notification.datetime_view }" > <!-- class="icon" --> <div class="col-md-1" [ngSwitch]="notification.notification_type_id"> <i *ngSwitchCase="17" class="fas fa-shipping-fast"></i> <i *ngSwitchCase="20" class="fas fa-hand-paper"></i> <i *ngSwitchCase="61" class="fas fa-exclamation-circle"></i> <i *ngSwitchDefault class="fas fa-info"></i> </div> <!-- class="details" --> <div class="col-md-10 estilo-texto-notificaciones" (click)="showPointMap( notification );"> <!-- <div class="message"> --> {{ notification.short_message }} <i class="details pull-right"> {{ notification.datetime | tiempoTranscurrido }} </i> <!-- </div> --> </div> <div class="col-md-1" *ngIf="!holdMenu" (click)="clearNotification( notification )" > <i type="button" class="fas fa-check-double"></i> </div> </div>