Alerts - nowzoo/nowzoo-angular-bootstrap-lite GitHub Wiki

• NzbAlertDirective code
• selector: '[nzbAlert]'
• exportAs: 'nzbAlert'
• Examples

Use the nzbAlert selector with native Bootstrap alert markup. This creates an instance of NzbAlertDirective, with an API that closely follows the native Bootstrap implementation. Notes:

• Bootstrap removes the alert markup when the modal is closed. The library does not change this behavior, but it does provide an open method that reinserts the original markup into the DOM — showing the alert again.
• Relatedly, you can hide the alert when it is instantiated using the initiallyOpen input.

<div nzbAlert #alert1="nzbAlert" class="alert alert-warning alert-dismissible fade" role="alert">
  <button type="button" class="close" data-dismiss="alert" aria-label="Close">
    <span aria-hidden="true">&times;</span>
  </button>
  <strong>Holy guacamole!</strong> You should check in on some of those fields below.
</div>
<p>Alert 1 Status: {{ alert1.status | async }}</p>

Use ViewChild to grab the instance in your component:

export class SomeComponent implements AfterViewInit {
  @ViewChild('alert1') alert1: NzbAlertDirective;
  ngAfterViewInit() {
    console.log(this.alert1);
  }
}

• initiallyOpen: boolean = true Whether to show the alert initially. Use [initiallyOpen]="false" to hide the alert.
• Use the contextual classes (e.g. alert-warning) as you would normally.
• Add the fade class to enable animation.
• Add the alert-dismissable class if you include a close button.

• close(): void A wrapper around the native method. Within the modal, you can use data-dismiss="alert" as well. Note that Bootstrap removes the markup from the DOM when the alert is closed; we do not change this behavior.
• open(): void Reinserts the alert markup (if necessary) and shows the alert.

• status: Observable<string> One of:
  • 'uninitialized'
  • 'opening'
  • 'opened'
  • 'closing'
  • 'closed'
• events: Observable<Event> Provides the native bootstrap alert events (close.bs.alert and closed.bs.alert) as an observable. Note that there are no analogous open and opened events, since such events do not exist natively.