0
# Feedback Components
1
2
User feedback components including toast notifications, tooltips, and popovers for providing contextual information and notifications to users.
3
4
## Core Imports
5
6
```typescript
7
import {
8
NgbToastModule,
9
NgbTooltipModule,
10
NgbPopoverModule
11
} from '@ng-bootstrap/ng-bootstrap';
12
```
13
14
## Capabilities
15
16
### NgbToast
17
18
Toast notification component for displaying temporary messages.
19
20
```typescript { .api }
21
@Component({
22
selector: 'ngb-toast',
23
exportAs: 'ngbToast'
24
})
25
class NgbToast {
26
/** Enable/disable fade animation */
27
@Input() animation: boolean;
28
29
/** If true, toast will hide automatically after delay */
30
@Input() autohide: boolean;
31
32
/** Delay in milliseconds before auto-hiding */
33
@Input() delay: number;
34
35
/** Toast header text */
36
@Input() header: string;
37
38
/** CSS class for the toast */
39
@Input() class: string;
40
41
/** Event emitted when toast is hidden */
42
@Output() hide: EventEmitter<void>;
43
44
/** Programmatically show the toast */
45
show(): void;
46
47
/** Programmatically hide the toast */
48
hide(): void;
49
}
50
```
51
52
### NgbToastHeader
53
54
Header component for toast notifications.
55
56
```typescript { .api }
57
@Component({
58
selector: 'ngb-toast-header',
59
exportAs: 'ngbToastHeader'
60
})
61
class NgbToastHeader {}
62
```
63
64
### NgbTooltip
65
66
Tooltip directive for displaying contextual help on hover or focus.
67
68
```typescript { .api }
69
@Directive({
70
selector: '[ngbTooltip]',
71
exportAs: 'ngbTooltip'
72
})
73
class NgbTooltip {
74
/** Tooltip content (string or template) */
75
@Input() ngbTooltip: string | TemplateRef<any>;
76
77
/** CSS class for the tooltip */
78
@Input() tooltipClass: string;
79
80
/** Tooltip placement */
81
@Input() placement: Placement;
82
83
/** Events that trigger tooltip (space-separated) */
84
@Input() triggers: string;
85
86
/** Container element for the tooltip */
87
@Input() container: string;
88
89
/** If true, tooltip is disabled */
90
@Input() disableTooltip: boolean;
91
92
/** Delay before showing tooltip */
93
@Input() openDelay: number;
94
95
/** Delay before hiding tooltip */
96
@Input() closeDelay: number;
97
98
/** Event emitted when tooltip is shown */
99
@Output() shown: EventEmitter<void>;
100
101
/** Event emitted when tooltip is hidden */
102
@Output() hidden: EventEmitter<void>;
103
104
/** Programmatically open the tooltip */
105
open(): void;
106
107
/** Programmatically close the tooltip */
108
close(): void;
109
110
/** Toggle tooltip visibility */
111
toggle(): void;
112
113
/** Check if tooltip is open */
114
isOpen(): boolean;
115
}
116
```
117
118
### NgbPopover
119
120
Popover directive for displaying rich content in an overlay.
121
122
```typescript { .api }
123
@Directive({
124
selector: '[ngbPopover]',
125
exportAs: 'ngbPopover'
126
})
127
class NgbPopover {
128
/** Popover content (string or template) */
129
@Input() ngbPopover: string | TemplateRef<any>;
130
131
/** Popover title */
132
@Input() popoverTitle: string | TemplateRef<any>;
133
134
/** CSS class for the popover */
135
@Input() popoverClass: string;
136
137
/** Popover placement */
138
@Input() placement: Placement;
139
140
/** Events that trigger popover (space-separated) */
141
@Input() triggers: string;
142
143
/** Container element for the popover */
144
@Input() container: string;
145
146
/** If true, popover is disabled */
147
@Input() disablePopover: boolean;
148
149
/** Delay before showing popover */
150
@Input() openDelay: number;
151
152
/** Delay before hiding popover */
153
@Input() closeDelay: number;
154
155
/** Event emitted when popover is shown */
156
@Output() shown: EventEmitter<void>;
157
158
/** Event emitted when popover is hidden */
159
@Output() hidden: EventEmitter<void>;
160
161
/** Programmatically open the popover */
162
open(): void;
163
164
/** Programmatically close the popover */
165
close(): void;
166
167
/** Toggle popover visibility */
168
toggle(): void;
169
170
/** Check if popover is open */
171
isOpen(): boolean;
172
}
173
```
174
175
### Configuration Services
176
177
```typescript { .api }
178
@Injectable({ providedIn: 'root' })
179
class NgbToastConfig {
180
/** Default animation setting */
181
animation: boolean;
182
183
/** Default autohide setting */
184
autohide: boolean;
185
186
/** Default delay in milliseconds */
187
delay: number;
188
189
/** Default CSS class */
190
toastClass: string;
191
}
192
193
@Injectable({ providedIn: 'root' })
194
class NgbTooltipConfig {
195
/** Default animation setting */
196
animation: boolean;
197
198
/** Default autoClose setting */
199
autoClose: boolean;
200
201
/** Default placement */
202
placement: Placement;
203
204
/** Default triggers */
205
triggers: string;
206
207
/** Default container */
208
container: string;
209
210
/** Default disabled state */
211
disableTooltip: boolean;
212
213
/** Default CSS class */
214
tooltipClass: string;
215
216
/** Default open delay */
217
openDelay: number;
218
219
/** Default close delay */
220
closeDelay: number;
221
}
222
223
@Injectable({ providedIn: 'root' })
224
class NgbPopoverConfig {
225
/** Default animation setting */
226
animation: boolean;
227
228
/** Default autoClose setting */
229
autoClose: boolean;
230
231
/** Default placement */
232
placement: Placement;
233
234
/** Default triggers */
235
triggers: string;
236
237
/** Default container */
238
container: string;
239
240
/** Default disabled state */
241
disablePopover: boolean;
242
243
/** Default CSS class */
244
popoverClass: string;
245
246
/** Default open delay */
247
openDelay: number;
248
249
/** Default close delay */
250
closeDelay: number;
251
}
252
```
253
254
## Type Definitions
255
256
```typescript { .api }
257
interface NgbToastOptions {
258
/** CSS class for the toast */
259
class?: string;
260
261
/** Delay before auto-hiding */
262
delay?: number;
263
264
/** If true, toast will auto-hide */
265
autohide?: boolean;
266
267
/** Header text */
268
header?: string;
269
}
270
```
271
272
## Usage Examples
273
274
### Basic Toast Notifications
275
276
```typescript
277
@Component({
278
template: `
279
<div class="mb-3">
280
<button class="btn btn-primary me-2" (click)="showSuccess()">
281
Show Success
282
</button>
283
<button class="btn btn-warning me-2" (click)="showWarning()">
284
Show Warning
285
</button>
286
<button class="btn btn-danger" (click)="showError()">
287
Show Error
288
</button>
289
</div>
290
291
<ngb-toast
292
*ngFor="let toast of toasts; trackBy: trackByToast"
293
[class]="toast.class"
294
[autohide]="true"
295
[delay]="toast.delay"
296
(hide)="removeToast(toast)">
297
298
<ng-template [ngIf]="toast.header">
299
<ngb-toast-header>
300
<strong>{{ toast.header }}</strong>
301
</ngb-toast-header>
302
</ng-template>
303
304
{{ toast.message }}
305
</ngb-toast>
306
`
307
})
308
export class BasicToastComponent {
309
toasts: any[] = [];
310
311
showSuccess() {
312
this.toasts.push({
313
id: Date.now(),
314
class: 'bg-success text-white',
315
header: 'Success',
316
message: 'Operation completed successfully!',
317
delay: 5000
318
});
319
}
320
321
showWarning() {
322
this.toasts.push({
323
id: Date.now(),
324
class: 'bg-warning text-white',
325
header: 'Warning',
326
message: 'Please check your input.',
327
delay: 5000
328
});
329
}
330
331
showError() {
332
this.toasts.push({
333
id: Date.now(),
334
class: 'bg-danger text-white',
335
header: 'Error',
336
message: 'Something went wrong!',
337
delay: 8000
338
});
339
}
340
341
removeToast(toast: any) {
342
this.toasts = this.toasts.filter(t => t.id !== toast.id);
343
}
344
345
trackByToast(index: number, toast: any) {
346
return toast.id;
347
}
348
}
349
```
350
351
### Basic Tooltips
352
353
```typescript
354
@Component({
355
template: `
356
<div class="mb-3">
357
<button
358
class="btn btn-primary me-2"
359
ngbTooltip="This is a basic tooltip">
360
Hover me
361
</button>
362
363
<button
364
class="btn btn-secondary me-2"
365
ngbTooltip="Tooltip on top"
366
placement="top">
367
Top tooltip
368
</button>
369
370
<button
371
class="btn btn-success"
372
ngbTooltip="Custom styled tooltip"
373
tooltipClass="custom-tooltip">
374
Custom tooltip
375
</button>
376
</div>
377
`,
378
styles: [`
379
:host ::ng-deep .custom-tooltip .tooltip-inner {
380
background-color: #28a745;
381
font-size: 14px;
382
}
383
`]
384
})
385
export class BasicTooltipComponent {}
386
```
387
388
### Template Tooltips
389
390
```typescript
391
@Component({
392
template: `
393
<button
394
class="btn btn-info"
395
[ngbTooltip]="tooltipTemplate">
396
Rich content tooltip
397
</button>
398
399
<ng-template #tooltipTemplate>
400
<div class="text-center">
401
<strong>Rich Tooltip</strong><br>
402
<small>With <em>formatted</em> content</small>
403
</div>
404
</ng-template>
405
`
406
})
407
export class TemplateTooltipComponent {}
408
```
409
410
### Basic Popovers
411
412
```typescript
413
@Component({
414
template: `
415
<div class="mb-3">
416
<button
417
class="btn btn-primary me-2"
418
ngbPopover="This is a basic popover content"
419
popoverTitle="Basic Popover">
420
Click me
421
</button>
422
423
<button
424
class="btn btn-secondary me-2"
425
ngbPopover="Popover on hover"
426
popoverTitle="Hover Popover"
427
triggers="hover">
428
Hover me
429
</button>
430
431
<button
432
class="btn btn-success"
433
[ngbPopover]="popoverTemplate"
434
popoverTitle="Template Popover">
435
Template popover
436
</button>
437
</div>
438
439
<ng-template #popoverTemplate>
440
<div>
441
<p>This is a <strong>template</strong> popover.</p>
442
<ul>
443
<li>Item 1</li>
444
<li>Item 2</li>
445
</ul>
446
</div>
447
</ng-template>
448
`
449
})
450
export class BasicPopoverComponent {}
451
```
452
453
### Programmatic Control
454
455
```typescript
456
@Component({
457
template: `
458
<div class="mb-3">
459
<button class="btn btn-primary me-2" (click)="tooltip.open()">
460
Show Tooltip
461
</button>
462
<button class="btn btn-secondary me-2" (click)="tooltip.close()">
463
Hide Tooltip
464
</button>
465
<button class="btn btn-info" (click)="tooltip.toggle()">
466
Toggle Tooltip
467
</button>
468
</div>
469
470
<button
471
class="btn btn-outline-primary"
472
ngbTooltip="Programmatically controlled tooltip"
473
triggers="manual"
474
#tooltip="ngbTooltip">
475
Controlled tooltip
476
</button>
477
478
<div class="mt-3">
479
<button class="btn btn-warning me-2" (click)="popover.open()">
480
Show Popover
481
</button>
482
<button class="btn btn-dark me-2" (click)="popover.close()">
483
Hide Popover
484
</button>
485
</div>
486
487
<button
488
class="btn btn-outline-warning"
489
ngbPopover="Programmatically controlled popover"
490
popoverTitle="Controlled"
491
triggers="manual"
492
#popover="ngbPopover">
493
Controlled popover
494
</button>
495
`
496
})
497
export class ProgrammaticControlComponent {}
498
```
499
500
### Toast Service
501
502
```typescript
503
@Injectable({ providedIn: 'root' })
504
export class ToastService {
505
toasts: any[] = [];
506
507
show(message: string, options: Partial<NgbToastOptions> = {}) {
508
this.toasts.push({
509
id: Date.now(),
510
message,
511
...options
512
});
513
}
514
515
showSuccess(message: string) {
516
this.show(message, {
517
class: 'bg-success text-white',
518
header: 'Success',
519
delay: 5000
520
});
521
}
522
523
showError(message: string) {
524
this.show(message, {
525
class: 'bg-danger text-white',
526
header: 'Error',
527
delay: 8000
528
});
529
}
530
531
remove(toast: any) {
532
this.toasts = this.toasts.filter(t => t.id !== toast.id);
533
}
534
535
clear() {
536
this.toasts = [];
537
}
538
}
539
540
@Component({
541
selector: 'app-toast-container',
542
template: `
543
<ngb-toast
544
*ngFor="let toast of toastService.toasts; trackBy: trackByToast"
545
[class]="toast.class"
546
[autohide]="toast.autohide !== false"
547
[delay]="toast.delay || 5000"
548
(hide)="toastService.remove(toast)">
549
550
<ng-template [ngIf]="toast.header">
551
<ngb-toast-header>
552
<strong>{{ toast.header }}</strong>
553
</ngb-toast-header>
554
</ng-template>
555
556
{{ toast.message }}
557
</ngb-toast>
558
`,
559
styles: [`
560
:host {
561
position: fixed;
562
top: 20px;
563
right: 20px;
564
z-index: 1200;
565
}
566
`]
567
})
568
export class ToastContainerComponent {
569
constructor(public toastService: ToastService) {}
570
571
trackByToast(index: number, toast: any) {
572
return toast.id;
573
}
574
}
575
```