Skip to main content

angular bootstrap - Alert closed event

app.component.ts 

import { Component } from '@angular/core';
import { NgbAlert } from '@ng-bootstrap/ng-bootstrap';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})


export class AppComponent {
  message:String = "";

  onAlertClose(ngbAlert:NgbAlert){
    this.message = ngbAlert.type + " closed."
  }
}
app.component.html 

<h4 style="padding-top:25px; padding-bottom:25px;">
  Angular Bootstrap - Alert closed event
</h4>

<ng-template [ngIf]="message.length>0">
  {{message}}
</ng-template>

<p>
  <ngb-alert 
  #alert
  type="warning" 
  (closed)="onAlertClose(alert)">
    <strong>Warning!</strong>
    This is an angular bootstrap warning alert.
  </ngb-alert>
</p>
More Angular tutorials
Labels: