Overview

Inputs

Input	Type	Default	Description
type	string	success	Defines alert type class (alert-{type}). Allow to use Bootstrap 4 classes like "success", "info", "warning" and "danger".
skippable	boolean	false	Defines if alert can be dismissed
displayTime	number	false	Defines alert display time. If not defined alert will persist

Outputs

Output	Type	Description
close	EventEmitter	Emits event when alert is closed. Has no payload

Example

HTML:

    <button (click)="createAlerts()">Add few alerts!</button>

    <p *ngFor="let alert of alerts; let i = index">
        <a2-alert [type]="alert.type" [skippable]="alert.skippable"
               [displayTime]="alert.displayTime" (close)="hideEvent(i)">
        </a2-alert>
    </p>

TypeScript:

@Component({
    selector: "a2uie-alert",
    templateUrl: "src/examples/bootstrap/alert/alert.example.component.html"
})
export class AlertExampleComponent {
    alerts: Array<any> = [];

    createAlerts(): void {
        this.alerts = [
            {type: "success", content: "Alert", skippable: false},
            {type: "info", content: "Skippable alert", skippable: true},
            {type: "warning", content: "Alert with display time 5 seconds", skippable: false, displayTime: 5000},
            {type: "danger", content: "Skippable alert with display time 7 seconds", skippable: true, displayTime: 7000}
        ];
    }

    hideEvent(index: number): void {
        this.alerts.splice(index, 1);
    }
}