0
# Interactive Components
1

2
Core interactive Bootstrap components including accordions, modals, dropdowns, tabs, and collapse functionality.
3

4
## Capabilities
5

6
### Accordion
7

8
Collapsible content panels that can be configured to show/hide individual sections.
9

10
```typescript { .api }
11
/**
12
 * Container component for collapsible content panels
13
 */
14
@Component({
15
  selector: 'accordion'
16
})
17
class AccordionComponent {
18
  /** Enable/disable animations for panel transitions */
19
  @Input() isAnimated: boolean = false;
20
  /** Close other panels when one opens */
21
  @Input() closeOthers: boolean = false;
22

23
  /** Add a panel to the accordion */
24
  addGroup(group: AccordionPanelComponent): void;
25
  /** Remove a panel from the accordion */
26
  removeGroup(group: AccordionPanelComponent): void;
27
  /** Close all panels except the specified one */
28
  closeOtherPanels(openGroup: AccordionPanelComponent): void;
29
}
30

31
/**
32
 * Individual collapsible panel within an accordion
33
 */
34
@Component({
35
  selector: 'accordion-group, accordion-panel'
36
})
37
class AccordionPanelComponent {
38
  /** Panel header text */
39
  @Input() heading: string;
40
  /** Bootstrap panel CSS class */
41
  @Input() panelClass: string = 'panel-default';
42
  /** Disable the panel */
43
  @Input() isDisabled: boolean = false;
44
  /** Panel open/close state (two-way binding) */
45
  @Input() isOpen: boolean = false;
46
  /** Event emitted when panel open state changes */
47
  @Output() isOpenChange: EventEmitter<boolean> = new EventEmitter();
48

49
  /** Toggle panel open/close state */
50
  toggleOpen(): void;
51
}
52

53
/**
54
 * Angular module for accordion functionality
55
 */
56
@NgModule({
57
  declarations: [AccordionComponent, AccordionPanelComponent],
58
  exports: [AccordionComponent, AccordionPanelComponent]
59
})
60
class AccordionModule {}
61

62
/**
63
 * Global configuration service for accordion components
64
 */
65
@Injectable()
66
class AccordionConfig {
67
  /** Default close others behavior */
68
  closeOthers: boolean = false;
69
  /** Default animation behavior */
70
  isAnimated: boolean = false;
71
}
72
```
73

74
**Usage Example:**
75

76
```typescript
77
import { AccordionModule } from 'ngx-bootstrap/accordion';
78

79
@Component({
80
  template: `
81
    <accordion [closeOthers]="true" [isAnimated]="true">
82
      <accordion-panel 
83
        heading="Panel 1" 
84
        [isOpen]="panel1Open" 
85
        (isOpenChange)="panel1Open = $event">
86
        Content for panel 1
87
      </accordion-panel>
88
      <accordion-panel heading="Panel 2" [isDisabled]="false">
89
        Content for panel 2
90
      </accordion-panel>
91
    </accordion>
92
  `,
93
  imports: [AccordionModule]
94
})
95
export class MyComponent {
96
  panel1Open = true;
97
}
98
```
99

100
### Modal
101

102
Programmatic and template-driven modal dialogs with comprehensive configuration options.
103

104
```typescript { .api }
105
/**
106
 * Service for programmatic modal management
107
 */
108
@Injectable()
109
class BsModalService {
110
  /** Show a modal with the specified component */
111
  show<T>(component: ComponentType<T>, config?: Partial<ModalOptions>): BsModalRef<T>;
112
  /** Hide a modal by ID or hide the top modal */
113
  hide(id?: number): void;
114
  /** Get the count of currently displayed modals */
115
  getModalsCount(): number;
116
  /** Set global modal configuration */
117
  setDismissReason(reason: string): void;
118

119
  /** Event emitted when a modal is about to be shown */
120
  onShow: EventEmitter<BsModalRef>;
121
  /** Event emitted when a modal has been shown */
122
  onShown: EventEmitter<BsModalRef>;
123
  /** Event emitted when a modal is about to be hidden */
124
  onHide: EventEmitter<BsModalRef>;
125
  /** Event emitted when a modal has been hidden */
126
  onHidden: EventEmitter<BsModalRef>;
127
}
128

129
/**
130
 * Reference to an opened modal instance
131
 */
132
class BsModalRef<T = any> {
133
  /** Content component instance */
134
  content?: T;
135
  /** Modal ID */
136
  id?: number;
137

138
  /** Close the modal */
139
  hide(): void;
140
  /** Set CSS classes on the modal */
141
  setClass(newClass: string): void;
142
}
143

144
/**
145
 * Template-driven modal directive
146
 */
147
@Directive({
148
  selector: '[bsModal]'
149
})
150
class ModalDirective {
151
  /** Modal configuration options */
152
  @Input() config: ModalOptions;
153
  /** Show/hide the modal */
154
  @Input() bsModal: boolean;
155

156
  /** Event emitted when modal is shown */
157
  @Output() onShow: EventEmitter<ModalDirective>;
158
  /** Event emitted when modal is hidden */
159
  @Output() onHide: EventEmitter<ModalDirective>;
160

161
  /** Show the modal */
162
  show(): void;
163
  /** Hide the modal */
164
  hide(): void;
165
  /** Toggle modal visibility */
166
  toggle(): void;
167
}
168

169
/**
170
 * Configuration options for modals
171
 */
172
interface ModalOptions {
173
  /** Enable/disable backdrop */
174
  backdrop?: boolean | 'static';
175
  /** Enable/disable keyboard ESC key */
176
  keyboard?: boolean;
177
  /** Focus modal when shown */
178
  focus?: boolean;
179
  /** Show modal immediately */
180
  show?: boolean;
181
  /** Ignore backdrop clicks */
182
  ignoreBackdropClick?: boolean;
183
  /** CSS class for modal */
184
  class?: string;
185
  /** CSS class for modal container */
186
  containerClass?: string;
187
  /** Enable/disable animations */
188
  animated?: boolean;
189
  /** Data to pass to modal component */
190
  data?: any;
191
  /** Initial state for modal component */
192
  initialState?: any;
193
  /** Additional providers for modal */
194
  providers?: StaticProvider[];
195
  /** ARIA described by */
196
  ariaDescribedby?: string;
197
  /** ARIA labelled by */
198
  ariaLabelledBy?: string;
199
  /** ARIA label */
200
  ariaLabel?: string;
201
}
202

203
/**
204
 * Modal backdrop options for backdrop configuration
205
 */
206
class ModalBackdropOptions {
207
  /** Enable/disable backdrop animation */
208
  animate: boolean = true;
209

210
  constructor(options: ModalBackdropOptions);
211
}
212

213
/**
214
 * Function type for intercepting modal close operations
215
 */
216
type CloseInterceptorFn = () => Promise<void>;
217

218
/**
219
 * Angular module for modal functionality
220
 */
221
@NgModule({
222
  declarations: [ModalDirective, ModalContainerComponent, ModalBackdropComponent],
223
  exports: [ModalDirective],
224
  providers: [BsModalService]
225
})
226
class ModalModule {}
227
```
228

229
**Usage Example:**
230

231
```typescript
232
import { BsModalService, BsModalRef } from 'ngx-bootstrap/modal';
233

234
@Component({
235
  template: `
236
    <button (click)="openModal()" class="btn btn-primary">
237
      Open Modal
238
    </button>
239
  `
240
})
241
export class MyComponent {
242
  modalRef?: BsModalRef;
243

244
  constructor(private modalService: BsModalService) {}
245

246
  openModal() {
247
    this.modalRef = this.modalService.show(MyModalComponent, {
248
      class: 'modal-lg',
249
      backdrop: 'static',
250
      keyboard: false,
251
      initialState: {
252
        title: 'My Modal Title',
253
        data: { key: 'value' }
254
      }
255
    });
256

257
    this.modalRef.onHide?.subscribe(() => {
258
      console.log('Modal closed');
259
    });
260
  }
261
}
262
```
263

264
### Dropdown
265

266
Bootstrap dropdown menus with extensive configuration and positioning options.
267

268
```typescript { .api }
269
/**
270
 * Main dropdown container directive
271
 */
272
@Directive({
273
  selector: '[bsDropdown], [dropdown]'
274
})
275
class BsDropdownDirective {
276
  /** Dropdown placement */
277
  @Input() placement: 'top' | 'bottom' | 'left' | 'right' = 'bottom';
278
  /** Trigger events */
279
  @Input() triggers: string = 'click';
280
  /** Container selector for dropdown */
281
  @Input() container: string;
282
  /** Show dropdown above trigger (deprecated, use placement) */
283
  @Input() dropup: boolean = false;
284
  /** Auto close behavior */
285
  @Input() autoClose: boolean | 'outside' | 'inside' = true;
286
  /** Handle inside clicks */
287
  @Input() insideClick: boolean = false;
288
  /** Disable dropdown */
289
  @Input() isDisabled: boolean = false;
290
  /** Open/close state */
291
  @Input() isOpen: boolean = false;
292

293
  /** Event emitted when dropdown is shown */
294
  @Output() onShown: EventEmitter<BsDropdownDirective>;
295
  /** Event emitted when dropdown is hidden */
296
  @Output() onHidden: EventEmitter<BsDropdownDirective>;
297
  /** Event emitted when open state changes */
298
  @Output() isOpenChange: EventEmitter<boolean>;
299

300
  /** Show the dropdown */
301
  show(): void;
302
  /** Hide the dropdown */
303
  hide(): void;
304
  /** Toggle dropdown visibility */
305
  toggle(): void;
306
}
307

308
/**
309
 * Dropdown menu content directive
310
 */
311
@Directive({
312
  selector: '[bsDropdownMenu], [dropdownMenu]'
313
})
314
class BsDropdownMenuDirective {}
315

316
/**
317
 * Dropdown toggle trigger directive
318
 */
319
@Directive({
320
  selector: '[bsDropdownToggle], [dropdownToggle]'
321
})
322
class BsDropdownToggleDirective {
323
  /** Disable the toggle */
324
  @Input() isDisabled: boolean = false;
325

326
  /** Event emitted on click */
327
  @Output() onClick: EventEmitter<MouseEvent>;
328
}
329

330
/**
331
 * Dropdown state management service
332
 */
333
@Injectable()
334
class BsDropdownState {
335
  /** Current dropdown direction */
336
  direction: 'down' | 'up';
337
  /** Auto close behavior */
338
  autoClose: boolean | 'outside' | 'inside';
339
  /** Inside click handling */
340
  insideClick: boolean;
341
  /** Open state */
342
  isOpenChange: EventEmitter<boolean>;
343
  /** Animation state */
344
  isAnimated: boolean;
345

346
  /** Toggle dropdown state */
347
  toggleClick: EventEmitter<boolean>;
348
  /** Dropdown counts */
349
  counts: number;
350
}
351

352
/**
353
 * Global configuration for dropdowns
354
 */
355
@Injectable()
356
class BsDropdownConfig implements BsDropdownState {
357
  /** Default auto close behavior */
358
  autoClose: boolean | 'outside' | 'inside' = true;
359
  /** Default inside click behavior */
360
  insideClick: boolean = false;
361
  /** Default animation state */
362
  isAnimated: boolean = false;
363
}
364

365
/**
366
 * Angular module for dropdown functionality
367
 */
368
@NgModule({
369
  declarations: [
370
    BsDropdownDirective,
371
    BsDropdownMenuDirective,
372
    BsDropdownToggleDirective,
373
    BsDropdownContainerComponent
374
  ],
375
  exports: [
376
    BsDropdownDirective,
377
    BsDropdownMenuDirective,
378
    BsDropdownToggleDirective
379
  ]
380
})
381
class BsDropdownModule {}
382
```
383

384
**Usage Example:**
385

386
```typescript
387
import { BsDropdownModule } from 'ngx-bootstrap/dropdown';
388

389
@Component({
390
  template: `
391
    <div bsDropdown class="btn-group" [autoClose]="'outside'">
392
      <button 
393
        id="button-basic" 
394
        bsDropdownToggle 
395
        type="button" 
396
        class="btn btn-primary dropdown-toggle">
397
        Simple dropdown <span class="caret"></span>
398
      </button>
399
      <ul *bsDropdownMenu role="menu" class="dropdown-menu">
400
        <li role="menuitem"><a class="dropdown-item" href="#">Action</a></li>
401
        <li role="menuitem"><a class="dropdown-item" href="#">Another action</a></li>
402
        <li class="divider dropdown-divider"></li>
403
        <li role="menuitem"><a class="dropdown-item" href="#">Separated link</a></li>
404
      </ul>
405
    </div>
406
  `,
407
  imports: [BsDropdownModule]
408
})
409
export class MyComponent {}
410
```
411

412
### Tabs
413

414
Bootstrap tab functionality with dynamic tab management and custom content.
415

416
```typescript { .api }
417
/**
418
 * Bootstrap tab container component
419
 */
420
@Component({
421
  selector: 'tabset'
422
})
423
class TabsetComponent implements OnDestroy {
424
  /** Vertical tabs */
425
  @Input() vertical: boolean = false;
426
  /** Justified tabs */
427
  @Input() justified: boolean = false;
428
  /** Tab type */
429
  @Input() type: string = 'tabs';
430
  /** Custom class */
431
  @Input() customClass: string = '';
432

433
  /** Collection of tab directives */
434
  tabs: TabDirective[] = [];
435

436
  /** Add a tab */
437
  addTab(tab: TabDirective): void;
438
  /** Remove a tab */
439
  removeTab(tab: TabDirective, options?: { reselect: boolean; emit: boolean }): void;
440
  /** Get the currently active tab */
441
  getActive(): TabDirective | undefined;
442
}
443

444
/**
445
 * Individual tab directive
446
 */
447
@Directive({
448
  selector: 'tab, [tab]'
449
})
450
class TabDirective implements OnInit, OnDestroy {
451
  /** Tab heading text */
452
  @Input() heading: string;
453
  /** Tab ID */
454
  @Input() id: string;
455
  /** Disable the tab */
456
  @Input() disabled: boolean = false;
457
  /** Removable tab */
458
  @Input() removable: boolean = false;
459
  /** Active state */
460
  @Input() active: boolean = false;
461
  /** Custom CSS class */
462
  @Input() customClass: string = '';
463

464
  /** Event emitted when tab is selected */
465
  @Output() selectTab: EventEmitter<TabDirective> = new EventEmitter();
466
  /** Event emitted when tab is deselected */
467
  @Output() deselect: EventEmitter<TabDirective> = new EventEmitter();
468
  /** Event emitted when tab is removed */
469
  @Output() removed: EventEmitter<TabDirective> = new EventEmitter();
470

471
  /** Select this tab */
472
  select(): void;
473
}
474

475
/**
476
 * Custom tab heading directive
477
 */
478
@Directive({
479
  selector: '[tabHeading]'
480
})
481
class TabHeadingDirective {
482
  /** Template reference */
483
  templateRef: TemplateRef<any>;
484
}
485

486
/**
487
 * Global configuration for tabs
488
 */
489
@Injectable()
490
class TabsetConfig {
491
  /** Default tab type */
492
  type: string = 'tabs';
493
  /** Default vertical setting */
494
  vertical: boolean = false;
495
  /** Default justified setting */
496
  justified: boolean = false;
497
}
498

499
/**
500
 * Angular module for tabs functionality
501
 */
502
@NgModule({
503
  declarations: [
504
    TabsetComponent,
505
    TabDirective,
506
    TabHeadingDirective,
507
    NgTranscludeDirective
508
  ],
509
  exports: [
510
    TabsetComponent,
511
    TabDirective,
512
    TabHeadingDirective
513
  ]
514
})
515
class TabsModule {}
516
```
517

518
**Usage Example:**
519

520
```typescript
521
import { TabsModule } from 'ngx-bootstrap/tabs';
522

523
@Component({
524
  template: `
525
    <tabset [justified]="true">
526
      <tab heading="Tab 1" [active]="true">
527
        <p>Content of Tab 1</p>
528
      </tab>
529
      <tab heading="Tab 2" [disabled]="false">
530
        <p>Content of Tab 2</p>
531
      </tab>
532
      <tab [removable]="true" (removed)="onTabRemoved($event)">
533
        <ng-template tabHeading>
534
          <i class="fa fa-bell"></i> Custom Heading
535
        </ng-template>
536
        <p>Tab with custom heading and remove button</p>
537
      </tab>
538
    </tabset>
539
  `,
540
  imports: [TabsModule]
541
})
542
export class MyComponent {
543
  onTabRemoved(tab: TabDirective) {
544
    console.log('Tab removed:', tab.heading);
545
  }
546
}
547
```
548

549
### Collapse
550

551
Collapse/expand content with smooth animations.
552

553
```typescript { .api }
554
/**
555
 * Directive for collapsing/expanding content
556
 */
557
@Directive({
558
  selector: '[collapse]'
559
})
560
class CollapseDirective implements OnInit, OnDestroy {
561
  /** Collapse state */
562
  @Input() collapse: boolean = false;
563
  /** Display type when expanded */
564
  @Input() display: string = 'block';
565
  /** Animation duration */
566
  @Input() collapseAnimationDuration: number = 400;
567
  /** Disable animations */
568
  @Input() isAnimated: boolean = true;
569

570
  /** Event emitted when collapse starts */
571
  @Output() collapsed: EventEmitter<CollapseDirective> = new EventEmitter();
572
  /** Event emitted when expand starts */
573
  @Output() expanded: EventEmitter<CollapseDirective> = new EventEmitter();
574
  /** Event emitted when collapse finishes */
575
  @Output() collapses: EventEmitter<CollapseDirective> = new EventEmitter();
576
  /** Event emitted when expand finishes */
577
  @Output() expands: EventEmitter<CollapseDirective> = new EventEmitter();
578

579
  /** Collapse the element */
580
  hide(): void;
581
  /** Expand the element */
582
  show(): void;
583
  /** Toggle collapse state */
584
  toggle(): void;
585
}
586

587
/**
588
 * Angular module for collapse functionality
589
 */
590
@NgModule({
591
  declarations: [CollapseDirective],
592
  exports: [CollapseDirective]
593
})
594
class CollapseModule {}
595
```
596

597
**Usage Example:**
598

599
```typescript
600
import { CollapseModule } from 'ngx-bootstrap/collapse';
601

602
@Component({
603
  template: `
604
    <button 
605
      type="button" 
606
      class="btn btn-primary" 
607
      (click)="isCollapsed = !isCollapsed">
608
      Toggle Collapse
609
    </button>
610
    <div [collapse]="isCollapsed" class="card card-body">
611
      This content can be collapsed and expanded.
612
    </div>
613
  `,
614
  imports: [CollapseModule]
615
})
616
export class MyComponent {
617
  isCollapsed = false;
618
}
619
```
620

621
### Alert
622

623
Bootstrap alert notifications with various types and dismissal options.
624

625
```typescript { .api }
626
/**
627
 * Alert notification component
628
 */
629
@Component({
630
  selector: 'alert, bs-alert'
631
})
632
class AlertComponent implements OnInit {
633
  /** Alert type (success, info, warning, danger) */
634
  @Input() type: string = 'warning';
635
  /** Dismissible alert */
636
  @Input() dismissible: boolean = false;
637
  /** Dismiss timeout in milliseconds */
638
  @Input() dismissOnTimeout: number;
639
  /** Custom CSS class */
640
  @Input() customClass: string = '';
641

642
  /** Event emitted when alert is closed */
643
  @Output() onClosed: EventEmitter<AlertComponent> = new EventEmitter();
644
  /** Event emitted when alert close is initiated */
645
  @Output() onClose: EventEmitter<AlertComponent> = new EventEmitter();
646

647
  /** Close the alert */
648
  close(): void;
649
}
650

651
/**
652
 * Global configuration for alerts
653
 */
654
@Injectable()
655
class AlertConfig {
656
  /** Default alert type */
657
  type: string = 'warning';
658
  /** Default dismissible state */
659
  dismissible: boolean = false;
660
  /** Default dismiss timeout */
661
  dismissOnTimeout: number;
662
}
663

664
/**
665
 * Angular module for alert functionality
666
 */
667
@NgModule({
668
  declarations: [AlertComponent],
669
  exports: [AlertComponent]
670
})
671
class AlertModule {}
672
```
673

674
**Usage Example:**
675

676
```typescript
677
import { AlertModule } from 'ngx-bootstrap/alert';
678

679
@Component({
680
  template: `
681
    <alert type="success" [dismissible]="true" (onClosed)="onAlertClosed()">
682
      <strong>Success!</strong> Operation completed successfully.
683
    </alert>
684
    <alert type="danger" [dismissOnTimeout]="5000">
685
      <strong>Error!</strong> Something went wrong.
686
    </alert>
687
  `,
688
  imports: [AlertModule]
689
})
690
export class MyComponent {
691
  onAlertClosed() {
692
    console.log('Alert was closed');
693
  }
694
}
695
```