From 479778abd3d620e50ada63c3588e3d1a12070a89 Mon Sep 17 00:00:00 2001
From: Irina Ershova <ershova.ira92@gmail.com>
Date: Thu, 22 Feb 2018 18:11:49 +0200
Subject: [PATCH] fix(alerts): after dismissing alert are not removing from DOM
 #3608 (#3622)

Fix removing alert from DOM after its dismissing

Close #3608
---
 cypress/integration/alerts_page_spec.ts               |  5 +++--
 .../demos/dismiss-on-timeout/dismiss-on-timeout.html  |  8 ++------
 .../demos/dismiss-on-timeout/dismiss-on-timeout.ts    | 11 ++++++++++-
 .../app/components/+alerts/demos/dismiss/dismiss.html |  2 +-
 .../app/components/+alerts/demos/dismiss/dismiss.ts   |  9 +++++++--
 src/alert/alert.component.ts                          |  9 +++++++--
 6 files changed, 30 insertions(+), 14 deletions(-)

diff --git a/cypress/integration/alerts_page_spec.ts b/cypress/integration/alerts_page_spec.ts
index 78580883ad..b9d3fb8563 100644
--- a/cypress/integration/alerts_page_spec.ts
+++ b/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');
 
diff --git a/demo/src/app/components/+alerts/demos/dismiss-on-timeout/dismiss-on-timeout.html b/demo/src/app/components/+alerts/demos/dismiss-on-timeout/dismiss-on-timeout.html
index 591b19e124..477170d4bd 100644
--- a/demo/src/app/components/+alerts/demos/dismiss-on-timeout/dismiss-on-timeout.html
+++ b/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>
diff --git a/demo/src/app/components/+alerts/demos/dismiss-on-timeout/dismiss-on-timeout.ts b/demo/src/app/components/+alerts/demos/dismiss-on-timeout/dismiss-on-timeout.ts
index 61a47fd960..5cb637e7c3 100644
--- a/demo/src/app/components/+alerts/demos/dismiss-on-timeout/dismiss-on-timeout.ts
+++ b/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);
+  }
 }
diff --git a/demo/src/app/components/+alerts/demos/dismiss/dismiss.html b/demo/src/app/components/+alerts/demos/dismiss/dismiss.html
index 73df778db9..7cfcd6d5d9 100644
--- a/demo/src/app/components/+alerts/demos/dismiss/dismiss.html
+++ b/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>
diff --git a/demo/src/app/components/+alerts/demos/dismiss/dismiss.ts b/demo/src/app/components/+alerts/demos/dismiss/dismiss.ts
index fea0483d77..20b5db1fe0 100644
--- a/demo/src/app/components/+alerts/demos/dismiss/dismiss.ts
+++ b/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);
   }
 }
diff --git a/src/alert/alert.component.ts b/src/alert/alert.component.ts
index 3b22924f51..13a32e73c4 100644
--- a/src/alert/alert.component.ts
+++ b/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);