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 @@ - - Well done! You successfully read this important alert message. - - -

If you missed alert on top of me, just press Add more button

+

If you missed alert under me, just press Add more button

- {{ alert.msg }} + {{ alert.msg }}
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 @@
- {{ alert.msg }} + {{ alert.msg }}
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 = new EventEmitter(); + dismissibleChange = new EventEmitter(); constructor(_config: AlertConfig, private changeDetection: ChangeDetectorRef) { Object.assign(this, _config);