0
# Modal Components
1
2
Service-based modal dialogs with backdrop support, keyboard navigation, and flexible content options. Perfect for confirmations, forms, and detailed content display.
3
4
## Core Imports
5
6
```typescript
7
import {
8
NgbModalModule,
9
NgbModal,
10
NgbModalRef,
11
NgbActiveModal,
12
ModalDismissReasons
13
} from '@ng-bootstrap/ng-bootstrap';
14
```
15
16
## Capabilities
17
18
### NgbModal
19
20
Service for opening and managing modal dialogs.
21
22
```typescript { .api }
23
@Injectable({ providedIn: 'root' })
24
class NgbModal {
25
/** Open a modal dialog */
26
open(content: any, options?: NgbModalOptions): NgbModalRef;
27
28
/** Dismiss all open modals */
29
dismissAll(reason?: any): void;
30
31
/** Check if there are any open modals */
32
hasOpenModals(): boolean;
33
}
34
```
35
36
### NgbModalRef
37
38
Reference to an opened modal instance.
39
40
```typescript { .api }
41
class NgbModalRef {
42
/** Instance of the component if modal contains a component */
43
componentInstance?: any;
44
45
/** Promise that resolves when modal is closed or dismissed */
46
result: Promise<any>;
47
48
/** Close the modal with a result */
49
close(result?: any): void;
50
51
/** Dismiss the modal with a reason */
52
dismiss(reason?: any): void;
53
54
/** Update modal options */
55
update(options: NgbModalUpdatableOptions): void;
56
}
57
```
58
59
### NgbActiveModal
60
61
Reference to the currently active modal (used within modal content).
62
63
```typescript { .api }
64
@Injectable()
65
class NgbActiveModal {
66
/** Close the modal with a result */
67
close(result?: any): void;
68
69
/** Dismiss the modal with a reason */
70
dismiss(reason?: any): void;
71
}
72
```
73
74
### NgbModalConfig
75
76
Configuration service for setting default modal behavior.
77
78
```typescript { .api }
79
@Injectable({ providedIn: 'root' })
80
class NgbModalConfig {
81
/** Enable/disable animations */
82
animation: boolean;
83
84
/** Backdrop behavior */
85
backdrop: boolean | 'static';
86
87
/** Function called before dismissing */
88
beforeDismiss: () => boolean | Promise<boolean>;
89
90
/** Center modal vertically */
91
centered: boolean;
92
93
/** Container element for the modal */
94
container: string | Element;
95
96
/** Enable/disable keyboard support */
97
keyboard: boolean;
98
99
/** Make modal content scrollable */
100
scrollable: boolean;
101
102
/** Modal size */
103
size: 'sm' | 'lg' | 'xl';
104
105
/** Custom CSS class for modal window */
106
windowClass: string;
107
}
108
```
109
110
## Options and Interfaces
111
112
```typescript { .api }
113
interface NgbModalOptions {
114
/** Enable/disable animations */
115
animation?: boolean;
116
117
/** Backdrop behavior (true, false, or 'static') */
118
backdrop?: boolean | 'static';
119
120
/** Function called before dismissing the modal */
121
beforeDismiss?: () => boolean | Promise<boolean>;
122
123
/** Center modal vertically */
124
centered?: boolean;
125
126
/** Container element for the modal */
127
container?: string | Element;
128
129
/** Injector to use for component content */
130
injector?: Injector;
131
132
/** Enable/disable keyboard support (ESC to close) */
133
keyboard?: boolean;
134
135
/** Make modal content scrollable */
136
scrollable?: boolean;
137
138
/** Modal size */
139
size?: 'sm' | 'lg' | 'xl';
140
141
/** Custom CSS class for modal window */
142
windowClass?: string;
143
144
/** Custom CSS class for modal backdrop */
145
backdropClass?: string;
146
147
/** Custom CSS class for modal content */
148
modalDialogClass?: string;
149
}
150
151
interface NgbModalUpdatableOptions {
152
/** Enable/disable animations */
153
animation?: boolean;
154
155
/** Center modal vertically */
156
centered?: boolean;
157
158
/** Make modal content scrollable */
159
scrollable?: boolean;
160
161
/** Modal size */
162
size?: 'sm' | 'lg' | 'xl';
163
164
/** Custom CSS class for modal window */
165
windowClass?: string;
166
167
/** Custom CSS class for modal backdrop */
168
backdropClass?: string;
169
}
170
171
enum ModalDismissReasons {
172
/** Modal dismissed by clicking backdrop */
173
BACKDROP_CLICK,
174
175
/** Modal dismissed by pressing ESC key */
176
ESC
177
}
178
```
179
180
## Usage Examples
181
182
### Basic Modal with Template
183
184
```typescript
185
@Component({
186
template: `
187
<button class="btn btn-primary" (click)="openModal(content)">
188
Open Modal
189
</button>
190
191
<ng-template #content let-modal>
192
<div class="modal-header">
193
<h4 class="modal-title">Modal Title</h4>
194
<button type="button" class="btn-close" (click)="modal.dismiss()"></button>
195
</div>
196
197
<div class="modal-body">
198
<p>This is a basic modal example.</p>
199
</div>
200
201
<div class="modal-footer">
202
<button type="button" class="btn btn-secondary" (click)="modal.dismiss()">
203
Cancel
204
</button>
205
<button type="button" class="btn btn-primary" (click)="modal.close('Save click')">
206
Save
207
</button>
208
</div>
209
</ng-template>
210
`
211
})
212
export class BasicModalComponent {
213
constructor(private modalService: NgbModal) {}
214
215
openModal(content: any) {
216
const modalRef = this.modalService.open(content);
217
218
modalRef.result.then((result) => {
219
console.log('Modal closed with result:', result);
220
}).catch((error) => {
221
console.log('Modal dismissed:', error);
222
});
223
}
224
}
225
```
226
227
### Modal with Component Content
228
229
```typescript
230
@Component({
231
selector: 'app-modal-content',
232
template: `
233
<div class="modal-header">
234
<h4 class="modal-title">{{ title }}</h4>
235
<button type="button" class="btn-close" (click)="activeModal.dismiss()"></button>
236
</div>
237
238
<div class="modal-body">
239
<form>
240
<div class="mb-3">
241
<label for="name">Name:</label>
242
<input type="text" class="form-control" [(ngModel)]="name" name="name">
243
</div>
244
</form>
245
</div>
246
247
<div class="modal-footer">
248
<button type="button" class="btn btn-secondary" (click)="activeModal.dismiss()">
249
Cancel
250
</button>
251
<button type="button" class="btn btn-primary" (click)="save()">
252
Save
253
</button>
254
</div>
255
`
256
})
257
export class ModalContentComponent {
258
@Input() title: string = 'Default Title';
259
name: string = '';
260
261
constructor(public activeModal: NgbActiveModal) {}
262
263
save() {
264
this.activeModal.close(this.name);
265
}
266
}
267
268
@Component({
269
template: `
270
<button class="btn btn-primary" (click)="openComponentModal()">
271
Open Component Modal
272
</button>
273
`
274
})
275
export class ComponentModalComponent {
276
constructor(private modalService: NgbModal) {}
277
278
openComponentModal() {
279
const modalRef = this.modalService.open(ModalContentComponent);
280
modalRef.componentInstance.title = 'Custom Title';
281
282
modalRef.result.then((result) => {
283
console.log('User entered:', result);
284
});
285
}
286
}
287
```
288
289
### Modal with Custom Options
290
291
```typescript
292
@Component({
293
template: `
294
<button class="btn btn-primary me-2" (click)="openCenteredModal(content)">
295
Centered Modal
296
</button>
297
<button class="btn btn-success me-2" (click)="openLargeModal(content)">
298
Large Modal
299
</button>
300
<button class="btn btn-warning" (click)="openStaticModal(content)">
301
Static Modal
302
</button>
303
304
<ng-template #content let-modal>
305
<div class="modal-header">
306
<h4 class="modal-title">Custom Modal</h4>
307
<button type="button" class="btn-close" (click)="modal.dismiss()"></button>
308
</div>
309
<div class="modal-body">
310
<p>This modal demonstrates custom options.</p>
311
</div>
312
</ng-template>
313
`
314
})
315
export class CustomModalComponent {
316
constructor(private modalService: NgbModal) {}
317
318
openCenteredModal(content: any) {
319
this.modalService.open(content, {
320
centered: true,
321
size: 'sm'
322
});
323
}
324
325
openLargeModal(content: any) {
326
this.modalService.open(content, {
327
size: 'lg',
328
scrollable: true
329
});
330
}
331
332
openStaticModal(content: any) {
333
this.modalService.open(content, {
334
backdrop: 'static',
335
keyboard: false
336
});
337
}
338
}
339
```
340
341
### Confirmation Modal Service
342
343
```typescript
344
@Injectable({ providedIn: 'root' })
345
export class ConfirmationService {
346
constructor(private modalService: NgbModal) {}
347
348
confirm(
349
title: string = 'Confirm',
350
message: string = 'Are you sure?',
351
btnOkText: string = 'OK',
352
btnCancelText: string = 'Cancel'
353
): Promise<boolean> {
354
const modalRef = this.modalService.open(ConfirmationModalComponent);
355
modalRef.componentInstance.title = title;
356
modalRef.componentInstance.message = message;
357
modalRef.componentInstance.btnOkText = btnOkText;
358
modalRef.componentInstance.btnCancelText = btnCancelText;
359
360
return modalRef.result.catch(() => false);
361
}
362
}
363
364
@Component({
365
selector: 'app-confirmation-modal',
366
template: `
367
<div class="modal-header">
368
<h4 class="modal-title">{{ title }}</h4>
369
</div>
370
<div class="modal-body">
371
<p>{{ message }}</p>
372
</div>
373
<div class="modal-footer">
374
<button type="button" class="btn btn-secondary" (click)="activeModal.dismiss()">
375
{{ btnCancelText }}
376
</button>
377
<button type="button" class="btn btn-primary" (click)="activeModal.close(true)">
378
{{ btnOkText }}
379
</button>
380
</div>
381
`
382
})
383
export class ConfirmationModalComponent {
384
@Input() title: string;
385
@Input() message: string;
386
@Input() btnOkText: string;
387
@Input() btnCancelText: string;
388
389
constructor(public activeModal: NgbActiveModal) {}
390
}
391
```