I create a delete function for a notification list, but before it executes the drop-down list close ,and i can't find a solution to this problem.

component.ts:

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

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

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