fix(alerts): after dismissing alert are not removing from DOM #3608 (#3622)

Fix removing alert from DOM after its dismissing

Close #3608

Author: IraErshova

cypress/integration/alerts_page_spec.ts

@@ -72,9 +72,10 @@ describe('Alerts page test suite', () => {
   });
 
   it('alerts in dismissible example can all be closed and then resetting to default state', () => {
-    cy.get(alertsDemos[3]).find('alert').as('dismissAlert').each(($alert, i) => {
-      cy.get('@dismissAlert').eq(i).find('.close').click();
+    cy.get(alertsDemos[3]).find('alert').as('dismissAlert').each(($alert) => {
+      $alert.find('.close').click();
     });
+
     cy.get('@dismissAlert')
       .should('not.to.have.descendants', 'div');
 

demo/src/app/components/+alerts/demos/dismiss-on-timeout/dismiss-on-timeout.html

@@ -1,9 +1,5 @@
-<alert type="success" dismissOnTimeout="5000">
-  <strong>Well done!</strong> You successfully read this important alert message.
-</alert>
-
-<p>If you missed alert on top of me, just press <code>Add more</code> button</p>
+<p>If you missed alert under me, just press <code>Add more</code> button</p>
 <div *ngFor="let alert of alerts">
-  <alert [type]="alert.type" [dismissOnTimeout]="alert.timeout">{{ alert.msg }}</alert>
+  <alert [type]="alert.type" [dismissOnTimeout]="alert.timeout" (onClosed)="onClosed(alert)">{{ alert.msg }}</alert>
 </div>
 <button type="button" class="btn btn-primary" (click)="add()">Add more</button>

demo/src/app/components/+alerts/demos/dismiss-on-timeout/dismiss-on-timeout.ts

@@ -1,11 +1,16 @@
 import { Component } from '@angular/core';
+import { AlertComponent } from 'ngx-bootstrap/alert/alert.component';
 
 @Component({
   selector: 'demo-alert-timeout',
   templateUrl: './dismiss-on-timeout.html'
 })
 export class DemoAlertTimeoutComponent {
-  alerts: any = [];
+  alerts: any[] = [{
+    type: 'success',
+    msg: `Well done! You successfully read this important alert message. (added: ${new Date().toLocaleTimeString()})`,
+    timeout: 5000
+  }];
 
   add(): void {
     this.alerts.push({
@@ -14,4 +19,8 @@ export class DemoAlertTimeoutComponent {
       timeout: 5000
     });
   }
+
+  onClosed(dismissedAlert: AlertComponent): void {
+    this.alerts = this.alerts.filter(alert => alert !== dismissedAlert);
+  }
 }

demo/src/app/components/+alerts/demos/dismiss/dismiss.html

@@ -1,5 +1,5 @@
 <div *ngFor="let alert of alerts">
-  <alert [type]="alert.type" [dismissible]="dismissible">{{ alert.msg }}</alert>
+  <alert [type]="alert.type" [dismissible]="dismissible" (onClosed)="onClosed(alert)">{{ alert.msg }}</alert>
 </div>
 <button type="button" class="btn btn-primary" (click)="dismissible = !dismissible">Toggle dismissible</button>
 <button type="button" class="btn btn-primary" (click)="reset()">Reset</button>

demo/src/app/components/+alerts/demos/dismiss/dismiss.ts

@@ -6,7 +6,7 @@ import { Component } from '@angular/core';
 })
 export class DemoAlertDismissComponent {
   dismissible = true;
-  alerts: any = [
+  defaultAlerts: any[] = [
     {
       type: 'success',
       msg: `You successfully read this important alert message.`
@@ -20,8 +20,13 @@ export class DemoAlertDismissComponent {
       msg: `Better check yourself, you're not looking too good.`
     }
   ];
+  alerts = this.defaultAlerts;
 
   reset(): void {
-    this.alerts = this.alerts.map((alert: any) => Object.assign({}, alert));
+    this.alerts = this.defaultAlerts;
+  }
+
+  onClosed(dismissedAlert: any): void {
+    this.alerts = this.alerts.filter(alert => alert !== dismissedAlert);
   }
 }

src/alert/alert.component.ts

@@ -1,5 +1,10 @@
 import {
-  ChangeDetectionStrategy, ChangeDetectorRef, Component, EventEmitter, Input, OnInit,
+  ChangeDetectionStrategy,
+  ChangeDetectorRef,
+  Component,
+  EventEmitter,
+  Input,
+  OnInit,
   Output
 } from '@angular/core';
 import { AlertConfig } from './alert.config';
@@ -33,7 +38,7 @@ export class AlertComponent implements OnInit {
 
 
   classes = '';
-  dismissibleChange: EventEmitter<boolean> = new EventEmitter<boolean>();
+  dismissibleChange = new EventEmitter<boolean>();
 
   constructor(_config: AlertConfig, private changeDetection: ChangeDetectorRef) {
     Object.assign(this, _config);