Alert Components

import { NgbAlertModule } from '@ng-bootstrap/ng-bootstrap';

@Component({
  selector: 'ngb-alert',
  exportAs: 'ngbAlert'
})
class NgbAlert {
  /** Enable/disable fade animation */
  @Input() animation: boolean;
  
  /** If true, alert can be dismissed by the user */
  @Input() dismissible: boolean;
  
  /** Bootstrap alert type (success, info, warning, danger, primary, secondary, light, dark) */
  @Input() type: string;
  
  /** Event emitted when the alert is closed */
  @Output() close: EventEmitter<void>;
  
  /** Programmatically close the alert */
  close(): void;
}

@Injectable({ providedIn: 'root' })
class NgbAlertConfig {
  /** Default animation setting */
  animation: boolean;
  
  /** Default dismissible setting */
  dismissible: boolean;
  
  /** Default alert type */
  type: string;
}

@Component({
  template: `
    <ngb-alert type="success">
      <strong>Success!</strong> Your operation completed successfully.
    </ngb-alert>
    
    <ngb-alert type="warning">
      <strong>Warning!</strong> Please check your input.
    </ngb-alert>
    
    <ngb-alert type="danger">
      <strong>Error!</strong> Something went wrong.
    </ngb-alert>
  `
})
export class BasicAlertComponent {}

@Component({
  template: `
    <ngb-alert 
      type="info" 
      [dismissible]="true"
      (close)="onAlertClose()">
      <strong>Info!</strong> This alert can be dismissed.
    </ngb-alert>
  `
})
export class DismissibleAlertComponent {
  onAlertClose() {
    console.log('Alert was dismissed');
  }
}

@Component({
  template: `
    <div class="mb-3">
      <button class="btn btn-primary" (click)="showAlert('success')">
        Show Success
      </button>
      <button class="btn btn-secondary" (click)="showAlert('warning')">
        Show Warning
      </button>
    </div>
    
    <ngb-alert 
      *ngIf="alertMessage"
      [type]="alertType"
      [dismissible]="true"
      (close)="closeAlert()">
      {{ alertMessage }}
    </ngb-alert>
  `
})
export class DynamicAlertComponent {
  alertMessage: string = '';
  alertType: string = 'info';
  
  showAlert(type: string) {
    this.alertType = type;
    this.alertMessage = `This is a ${type} alert message`;
  }
  
  closeAlert() {
    this.alertMessage = '';
  }
}

@Component({
  template: `
    <ngb-alert type="primary" [dismissible]="true">
      <h4 class="alert-heading">Well done!</h4>
      <p>
        Aww yeah, you successfully read this important alert message.
        This example text is going to run a bit longer so that you can see
        how spacing within an alert works with this kind of content.
      </p>
      <hr>
      <p class="mb-0">
        Whenever you need to, be sure to use margin utilities to keep things nice and tidy.
      </p>
    </ngb-alert>
  `
})
export class CustomAlertComponent {}