tessl/npm-ng-bootstrap--ng-bootstrap

Angular powered Bootstrap UI component library with comprehensive Bootstrap 5 components for Angular applications

—

Pending

Quality

Pending

Does it follow best practices?

Impact

Pending

No eval scenarios have been run

Securityby

Pending

The risk profile of this skill

Overview

Eval results

Files

Accordion Components

Name: tessl/npm-ng-bootstrap--ng-bootstrap
Author: tessl

Collapsible content panels with smooth animations and keyboard navigation. The accordion components provide a way to organize content in a space-efficient manner with expand/collapse functionality.

Core Imports

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

Capabilities

NgbAccordionDirective

Main accordion container that manages multiple collapsible items.

@Directive({
  selector: '[ngbAccordion]',
  exportAs: 'ngbAccordion'
})
class NgbAccordionDirective {
  /** Enable/disable animations for expand/collapse */
  @Input() animation: boolean;
  
  /** If true, only one item can be open at a time */
  @Input() closeOthers: boolean;
  
  /** If true, accordion item content is removed from DOM when collapsed */
  @Input() destroyOnHide: boolean;
  
  /** Event emitted before an item is shown */
  @Output() show: EventEmitter<NgbAccordionShowEvent>;
  
  /** Event emitted after an item is shown */
  @Output() shown: EventEmitter<NgbAccordionShowEvent>;
  
  /** Event emitted before an item is hidden */
  @Output() hide: EventEmitter<NgbAccordionHideEvent>;
  
  /** Event emitted after an item is hidden */
  @Output() hidden: EventEmitter<NgbAccordionHideEvent>;
  
  /** Toggle the specified accordion item */
  toggle(id: string): void;
  
  /** Expand the specified accordion item */
  expand(id: string): void;
  
  /** Expand all accordion items */
  expandAll(): void;
  
  /** Collapse the specified accordion item */
  collapse(id: string): void;
  
  /** Collapse all accordion items */
  collapseAll(): void;
  
  /** Check if the specified accordion item is expanded */
  isExpanded(id: string): boolean;
}

NgbAccordionItem

Individual accordion item that can be expanded or collapsed.

@Directive({
  selector: '[ngbAccordionItem]',
  exportAs: 'ngbAccordionItem'
})
class NgbAccordionItem {
  /** Unique identifier for the accordion item */
  @Input() id: string;
  
  /** If true, content is removed from DOM when collapsed */
  @Input() destroyOnHide: boolean;
  
  /** If true, prevents the item from being toggled */
  @Input() disabled: boolean;
  
  /** Controls the expanded/collapsed state */
  @Input() collapsed: boolean;
  
  /** Event emitted before the item is shown */
  @Output() show: EventEmitter<NgbAccordionShowEvent>;
  
  /** Event emitted after the item is shown */
  @Output() shown: EventEmitter<NgbAccordionShowEvent>;
  
  /** Event emitted before the item is hidden */
  @Output() hide: EventEmitter<NgbAccordionHideEvent>;
  
  /** Event emitted after the item is hidden */
  @Output() hidden: EventEmitter<NgbAccordionHideEvent>;
  
  /** Toggle the item's expanded/collapsed state */
  toggle(): void;
  
  /** Expand the accordion item */
  expand(): void;
  
  /** Collapse the accordion item */
  collapse(): void;
}

NgbAccordionHeader

Header area of an accordion item, typically containing the toggle button.

@Directive({
  selector: '[ngbAccordionHeader]'
})
class NgbAccordionHeader {}

NgbAccordionToggle

Element that triggers the expand/collapse action for an accordion item.

@Directive({
  selector: '[ngbAccordionToggle]'
})
class NgbAccordionToggle {}

NgbAccordionButton

Button element specifically for accordion toggle functionality.

@Directive({
  selector: 'button[ngbAccordionButton]'
})
class NgbAccordionButton {}

NgbAccordionCollapse

Wrapper directive for the collapsible content area.

@Directive({
  selector: '[ngbAccordionCollapse]'
})
class NgbAccordionCollapse {}

NgbAccordionBody

Contains the actual content of an accordion item.

@Directive({
  selector: '[ngbAccordionBody]'
})
class NgbAccordionBody {}

NgbAccordionConfig

Configuration service for setting default accordion behavior.

@Injectable({ providedIn: 'root' })
class NgbAccordionConfig {
  /** Default animation setting */
  animation: boolean;
  
  /** Default close others setting */
  closeOthers: boolean;
  
  /** Default destroy on hide setting */
  destroyOnHide: boolean;
}

Event Interfaces

interface NgbAccordionShowEvent {
  itemId: string;
  preventDefault: () => void;
}

interface NgbAccordionHideEvent {
  itemId: string;
  preventDefault: () => void;
}

Usage Examples

Basic Accordion

@Component({
  template: `
    <ngb-accordion>
      <ngb-accordion-item id="item-1">
        <ngb-accordion-header>
          <button ngbAccordionButton>Simple Item</button>
        </ngb-accordion-header>
        <ngb-accordion-body>
          <p>Content for the first accordion item.</p>
        </ngb-accordion-body>
      </ngb-accordion-item>
      
      <ngb-accordion-item id="item-2">
        <ngb-accordion-header>
          <button ngbAccordionButton>Another Item</button>
        </ngb-accordion-header>
        <ngb-accordion-body>
          <p>Content for the second accordion item.</p>
        </ngb-accordion-body>
      </ngb-accordion-item>
    </ngb-accordion>
  `
})
export class BasicAccordionComponent {}

Programmatic Control

@Component({
  template: `
    <div class="mb-3">
      <button class="btn btn-primary me-2" (click)="accordion.expandAll()">
        Expand All
      </button>
      <button class="btn btn-secondary" (click)="accordion.collapseAll()">
        Collapse All
      </button>
    </div>
    
    <ngb-accordion #accordion [closeOthers]="false">
      <ngb-accordion-item id="item-1">
        <ngb-accordion-header>
          <button ngbAccordionButton>First Item</button>
        </ngb-accordion-header>
        <ngb-accordion-body>
          <p>Content for the first item.</p>
        </ngb-accordion-body>
      </ngb-accordion-item>
    </ngb-accordion>
  `
})
export class ProgrammaticAccordionComponent {}

Event Handling

@Component({
  template: `
    <ngb-accordion
      (show)="onShow($event)"
      (hide)="onHide($event)">
      <ngb-accordion-item id="item-1">
        <ngb-accordion-header>
          <button ngbAccordionButton>Item with Events</button>
        </ngb-accordion-header>
        <ngb-accordion-body>
          <p>Content that triggers events.</p>
        </ngb-accordion-body>
      </ngb-accordion-item>
    </ngb-accordion>
  `
})
export class EventAccordionComponent {
  onShow(event: NgbAccordionShowEvent) {
    console.log('Accordion item shown:', event.itemId);
  }
  
  onHide(event: NgbAccordionHideEvent) {
    console.log('Accordion item hidden:', event.itemId);
  }
}