0
# Alert Components
1

2
Contextual feedback messages for user actions providing flexible alert messages with Bootstrap styling and dismissal functionality.
3

4
## Core Imports
5

6
```typescript
7
import { NgbAlertModule } from '@ng-bootstrap/ng-bootstrap';
8
```
9

10
## Capabilities
11

12
### NgbAlert
13

14
Alert component for displaying contextual messages to users.
15

16
```typescript { .api }
17
@Component({
18
  selector: 'ngb-alert',
19
  exportAs: 'ngbAlert'
20
})
21
class NgbAlert {
22
  /** Enable/disable fade animation */
23
  @Input() animation: boolean;
24
  
25
  /** If true, alert can be dismissed by the user */
26
  @Input() dismissible: boolean;
27
  
28
  /** Bootstrap alert type (success, info, warning, danger, primary, secondary, light, dark) */
29
  @Input() type: string;
30
  
31
  /** Event emitted when the alert is closed */
32
  @Output() close: EventEmitter<void>;
33
  
34
  /** Programmatically close the alert */
35
  close(): void;
36
}
37
```
38

39
### NgbAlertConfig
40

41
Configuration service for setting default alert behavior.
42

43
```typescript { .api }
44
@Injectable({ providedIn: 'root' })
45
class NgbAlertConfig {
46
  /** Default animation setting */
47
  animation: boolean;
48
  
49
  /** Default dismissible setting */
50
  dismissible: boolean;
51
  
52
  /** Default alert type */
53
  type: string;
54
}
55
```
56

57
## Usage Examples
58

59
### Basic Alert
60

61
```typescript
62
@Component({
63
  template: `
64
    <ngb-alert type="success">
65
      <strong>Success!</strong> Your operation completed successfully.
66
    </ngb-alert>
67
    
68
    <ngb-alert type="warning">
69
      <strong>Warning!</strong> Please check your input.
70
    </ngb-alert>
71
    
72
    <ngb-alert type="danger">
73
      <strong>Error!</strong> Something went wrong.
74
    </ngb-alert>
75
  `
76
})
77
export class BasicAlertComponent {}
78
```
79

80
### Dismissible Alert
81

82
```typescript
83
@Component({
84
  template: `
85
    <ngb-alert 
86
      type="info" 
87
      [dismissible]="true"
88
      (close)="onAlertClose()">
89
      <strong>Info!</strong> This alert can be dismissed.
90
    </ngb-alert>
91
  `
92
})
93
export class DismissibleAlertComponent {
94
  onAlertClose() {
95
    console.log('Alert was dismissed');
96
  }
97
}
98
```
99

100
### Dynamic Alerts
101

102
```typescript
103
@Component({
104
  template: `
105
    <div class="mb-3">
106
      <button class="btn btn-primary" (click)="showAlert('success')">
107
        Show Success
108
      </button>
109
      <button class="btn btn-secondary" (click)="showAlert('warning')">
110
        Show Warning
111
      </button>
112
    </div>
113
    
114
    <ngb-alert 
115
      *ngIf="alertMessage"
116
      [type]="alertType"
117
      [dismissible]="true"
118
      (close)="closeAlert()">
119
      {{ alertMessage }}
120
    </ngb-alert>
121
  `
122
})
123
export class DynamicAlertComponent {
124
  alertMessage: string = '';
125
  alertType: string = 'info';
126
  
127
  showAlert(type: string) {
128
    this.alertType = type;
129
    this.alertMessage = `This is a ${type} alert message`;
130
  }
131
  
132
  closeAlert() {
133
    this.alertMessage = '';
134
  }
135
}
136
```
137

138
### Alert with Custom Content
139

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