### Install ngx-bootstrap

Source: https://context7.com/valor-software/ngx-bootstrap/llms.txt

Install ngx-bootstrap using the Angular CLI or npm.

```bash
# Using Angular CLI (recommended)
ng add ngx-bootstrap

# Manual installation via npm
npm install ngx-bootstrap --save
```

--------------------------------

### Build ngx-bootstrap for Development

Source: https://github.com/valor-software/ngx-bootstrap/blob/development/README.md

Commands to clone the repository, install dependencies, build the library, and start the development server. This is for contributing to ngx-bootstrap itself.

```bash
git clone https://github.com/valor-software/ngx-bootstrap.git
cd ngx-bootstrap
npm ci
npm run build
npm start
```

--------------------------------

### Manual npm Installation

Source: https://github.com/valor-software/ngx-bootstrap/blob/development/libs/common-docs/src/lib/common/documentation/documentation.component.html

Install the ngx-bootstrap package manually using npm. This is an alternative to using the Angular CLI command.

```bash
npm install ngx-bootstrap --save

```

--------------------------------

### Install ngx-bootstrap using npm

Source: https://github.com/valor-software/ngx-bootstrap/blob/development/README.md

Install the ngx-bootstrap package from npm. This is a manual step before importing modules.

```bash
npm install ngx-bootstrap --save
```

--------------------------------

### Button Dropdown Example

Source: https://github.com/valor-software/ngx-bootstrap/blob/development/libs/doc-pages/dropdown/src/lib/demos/state-change-event/state-change-event.html

This demonstrates a basic button dropdown structure. It includes a list of actions that appear when the button is clicked.

```html
Button dropdown

*   [Action](#)
*   [Another action](#)
*   [Something else here](#)
```

--------------------------------

### Open Modal Example

Source: https://github.com/valor-software/ngx-bootstrap/blob/development/libs/doc-pages/modal/src/lib/demos/scrolling-long-content/scrolling-long-content.html

Demonstrates how to open a modal with dynamic content using ngx-bootstrap. Ensure the modal component is imported and configured.

```typescript
import { Component } from '@angular/core';
import { BsModalService, BsModalRef } from 'ngx-bootstrap/modal';

@Component({
  selector: 'app',
  templateUrl: './app.component.html'
})
export class AppComponent {
  items: string[] = ['Item 1', 'Item 2', 'Item 3'];
  bsModalRef?: BsModalRef;

  constructor(private modalService: BsModalService) {}

  openModal() {
    this.bsModalRef = this.modalService.show(TemplateModalComponent);
    this.bsModalRef.content.closeBtnName = 'Close';
  }
}

@Component({
  selector: 'template-modal-component',
  template: `
    <div class="modal-header">
      <h4 class="modal-title pull-left">Modal title</h4>
      <button type="button" class="close pull-right" aria-label="Close" (click)="close()">
        <span class="visually-hidden">×</span>
      </button>
    </div>
    <div class="modal-body">
      @for (item of items; track item) {
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cumque delectus enim esse excepturi, impedit, iste magnam officia optio, quam quis quisquam saepe sint unde velit vitae! Animi in iusto ut?
      }
    </div>
  `
})
export class TemplateModalComponent {
  closeBtnName?: string;
  items: string[] = ['Item 1', 'Item 2', 'Item 3'];

  constructor(private modalRef: BsModalRef) {}

  close(): void {
    this.modalRef.hide();
  }
}

```

--------------------------------

### Run Unit Tests for Docs

Source: https://github.com/valor-software/ngx-bootstrap/blob/development/libs/common-docs/README.md

Execute unit tests for the 'docs' project using Nx. Ensure you have Nx installed and configured.

```bash
nx test docs
```

--------------------------------

### Angular CLI Installation

Source: https://github.com/valor-software/ngx-bootstrap/blob/development/libs/common-docs/src/lib/common/documentation/documentation.component.html

Install ngx-bootstrap in your Angular project using the Angular CLI's `ng add` command. This command automates the setup process.

```bash
ng add ngx-bootstrap

```

--------------------------------

### Add Specific Component with Schematics

Source: https://github.com/valor-software/ngx-bootstrap/blob/development/libs/common-docs/src/lib/common/schematics/schematics.component.html

Install a specific ngx-bootstrap component, like the accordion, using the `--component` flag.

```bash
ng add ngx-bootstrap  --component accordion
```

--------------------------------

### Browser Module Bootstrap

Source: https://github.com/valor-software/ngx-bootstrap/blob/development/libs/common-docs/src/lib/common/documentation/documentation.component.html

Bootstrap the Angular application using `platformBrowser` and `AppModule`. This is a standard way to start an Angular application.

```typescript
import { platformBrowser } from '@angular/platform-browser';
import { AppModule } from './app.module';
 
platformBrowser().bootstrapModule(AppModule).catch((err) => console.error(err));
      
```

--------------------------------

### Tooltip with Delay Configuration

Source: https://github.com/valor-software/ngx-bootstrap/blob/development/docs/spec/tooltip/tooltip.examples.tooltip-with-delay.use-case.md

Use the `[delay]` input property to set the delay in milliseconds before the tooltip appears. This example sets a 0.5-second delay.

```html
<button tooltip="Tooltip with 0.5sec delay" [delay]="500">Tooltip with 0.5sec delay</button>
```

--------------------------------

### Commit Message Body Example

Source: https://github.com/valor-software/ngx-bootstrap/blob/development/CONTRIBUTING.md

Example of a commit message including a header, blank line, body explaining the changes, and another blank line. This format is used for generating release notes.

```gitcommit
fix(release): need to depend on latest rxjs and zone.js

The version in our package.json gets copied to the one we publish, and users need the latest of these.
```

--------------------------------

### Install ngx-bootstrap using Angular CLI

Source: https://github.com/valor-software/ngx-bootstrap/blob/development/README.md

This command adds ngx-bootstrap to your Angular project. It handles necessary configurations automatically.

```bash
ng add ngx-bootstrap
```

--------------------------------

### Button Dropdown Example

Source: https://github.com/valor-software/ngx-bootstrap/blob/development/libs/doc-pages/dropdown/src/lib/demos/visibility-events/visibility-events.html

Demonstrates a basic button dropdown structure using unordered list items for actions. This is a common UI pattern for presenting a list of options associated with a button.

```html
*   [Action](#)
*   [Another action](#)
*   [Something else here](#)
```

--------------------------------

### Commit Message Header Example

Source: https://github.com/valor-software/ngx-bootstrap/blob/development/CONTRIBUTING.md

Example of a commit message header following the specified format, including type, optional scope, and subject.

```gitcommit
docs(changelog): update change log to beta.5
```

--------------------------------

### Timepicker with Min/Max Hour and Minute

Source: https://github.com/valor-software/ngx-bootstrap/blob/development/docs/spec/timepicker/timepicker.examples.min-max.use-case.md

This example configures the timepicker to accept hours between B and A, and minutes between M and N. Ensure minTime and maxTime are properly initialized before use.

```typescript
import { Component } from '@angular/core';

@Component({
  selector: 'app',
  templateUrl: './app.component.html'
})
export class AppComponent {
  minTime: Date = new Date();
  maxTime: Date = new Date();
  selectedTime: Date = new Date();

  constructor() {
    this.minTime.setHours(10);
    this.minTime.setMinutes(30);
    this.maxTime.setHours(18);
    this.maxTime.setMinutes(30);
  }
}
```

--------------------------------

### Angular Tooltip Directive Examples

Source: https://context7.com/valor-software/ngx-bootstrap/llms.txt

Illustrates various ways to use the Tooltip directive, including basic text, placement, delay, HTML templates, and programmatic control via template reference variables.

```typescript
import { Component } from '@angular/core';
import { TooltipModule } from 'ngx-bootstrap/tooltip';

@Component({
  selector: 'app-tooltip-demo',
  standalone: true,
  imports: [TooltipModule],
  template: `
    <!-- Basic tooltip -->
    <button type="button" class="btn btn-primary"
            tooltip="Simple tooltip text">
      Hover me
    </button>

    <!-- Tooltip with placement -->
    <button type="button" class="btn btn-info"
            tooltip="Tooltip on top"
            placement="top">
      Top Tooltip
    </button>

    <!-- Tooltip with delay -->
    <button type="button" class="btn btn-warning"
            tooltip="Delayed tooltip"
            [delay]="500">
      Delayed (500ms)
    </button>

    <!-- Tooltip with HTML template -->
    <button type="button" class="btn btn-success"
            [tooltip]="tooltipTemplate"
            placement="right">
      Template Tooltip
    </button>

    <ng-template #tooltipTemplate>
      <strong>Rich HTML</strong>
      <p>With multiple elements</p>
    </ng-template>

    <!-- Programmatic control -->
    <button type="button" class="btn btn-danger"
            tooltip="Programmatic tooltip"
            #tooltipRef="bs-tooltip"
            triggers="">
      Click buttons below
    </button>
    <button class="btn btn-sm btn-outline-primary" (click)="tooltipRef.show()">Show</button>
    <button class="btn btn-sm btn-outline-secondary" (click)="tooltipRef.hide()">Hide</button>
    <button class="btn btn-sm btn-outline-info" (click)="tooltipRef.toggle()">Toggle</button>
  `
})
export class TooltipDemoComponent {}

```

--------------------------------

### Basic Carousel Implementation with ngx-bootstrap

Source: https://context7.com/valor-software/ngx-bootstrap/llms.txt

Demonstrates a basic carousel setup using the CarouselModule. Ensure CarouselModule is imported. The interval property controls auto-play speed, and showIndicators enables navigation dots.

```typescript
import { Component } from '@angular/core';
import { CarouselModule } from 'ngx-bootstrap/carousel';

@Component({
  selector: 'app-carousel-demo',
  standalone: true,
  imports: [CarouselModule],
  template: `
    <!-- Basic carousel -->
    <carousel [interval]="3000" [showIndicators]="true">
      @for (slide of slides; track slide.id) {
        <slide>
          <img [src]="slide.image" alt="slide" style="width: 100%;">
          <div class="carousel-caption">
            <h3>{{ slide.title }}</h3>
            <p>{{ slide.description }}</p>
          </div>
        </slide>
      }
    </carousel>
  `
})
export class CarouselDemoComponent {
  slides = [
    { id: 1, image: 'assets/slide1.jpg', title: 'Slide 1', description: 'Description 1' },
    { id: 2, image: 'assets/slide2.jpg', title: 'Slide 2', description: 'Description 2' },
    { id: 3, image: 'assets/slide3.jpg', title: 'Slide 3', description: 'Description 3' },
  ];
}
```

--------------------------------

### Accordion Component Example

Source: https://context7.com/valor-software/ngx-bootstrap/llms.txt

Demonstrates the Accordion component with features like collapsible panels, animations, and custom styling. Imports AccordionModule and uses standalone components.

```typescript
import { Component } from '@angular/core';
import { AccordionModule } from 'ngx-bootstrap/accordion';

@Component({
  selector: 'app-accordion-demo',
  standalone: true,
  imports: [AccordionModule],
  template: `
    <accordion [closeOthers]="true" [isAnimated]="true">
      <accordion-group heading="Basic Panel" [isOpen]="true">
        This content is shown by default and will collapse others when opened.
      </accordion-group>

      <accordion-group heading="Another Panel" panelClass="panel-primary">
        <p>Panel with custom styling using panelClass.</p>
      </accordion-group>

      <accordion-group [isDisabled]="true">
        <span accordion-heading>
          Disabled Panel <i class="fa fa-lock"></i>
        </span>
        This panel is disabled and cannot be toggled.
      </accordion-group>

      <accordion-group
        heading="Dynamic Panel"
        (isOpenChange)="onPanelToggle($event)">
        Content that emits events when toggled.
      </accordion-group>
    </accordion>
  `
})
export class AccordionDemoComponent {
  onPanelToggle(isOpen: boolean): void {
    console.log('Panel is now:', isOpen ? 'open' : 'closed');
  }
}
```

--------------------------------

### Alert Component Example

Source: https://context7.com/valor-software/ngx-bootstrap/llms.txt

Showcases the Alert component with various configurations including contextual styles, dismissible alerts, auto-close timers, and conditional visibility. Imports AlertModule and uses standalone components.

```typescript
import { Component } from '@angular/core';
import { AlertModule } from 'ngx-bootstrap/alert';

@Component({
  selector: 'app-alert-demo',
  standalone: true,
  imports: [AlertModule],
  template: `
    <!-- Basic alerts with different types -->
    <alert type="success">
      <strong>Success!</strong> Operation completed successfully.
    </alert>

    <alert type="warning">
      <strong>Warning!</strong> Please review your input.
    </alert>

    <alert type="danger" [dismissible]="true" (onClosed)="onAlertClosed()">
      <strong>Error!</strong> Click X to dismiss this alert.
    </alert>

    <!-- Auto-dismissing alert -->
    <alert type="info" [dismissOnTimeout]="5000">
      This alert will automatically close after 5 seconds.
    </alert>

    <!-- Conditionally shown alert -->
    @if (showAlert) {
      <alert type="success" [isOpen]="showAlert" (onClose)="showAlert = false">
        Controlled alert visibility via isOpen binding.
      </alert>
    }
  `
})
export class AlertDemoComponent {
  showAlert = true;

  onAlertClosed(): void {
    console.log('Alert was dismissed');
  }
}
```

--------------------------------

### Popover with 0.5sec Delay - HTML

Source: https://github.com/valor-software/ngx-bootstrap/blob/development/docs/spec/popover/popover.examples.popover-with-delay.use-case.md

Use the `[delay]` attribute to set the delay in milliseconds before the popover appears. This example sets a delay of 500ms.

```html
<button popover="And here I am" popoverTitle="Title" [delay]="500">Popover with 0.5sec delay</button>
```

--------------------------------

### Display ngx-bootstrap Schematics Help

Source: https://github.com/valor-software/ngx-bootstrap/blob/development/libs/common-docs/src/lib/common/schematics/schematics.component.html

View available options and usage instructions for the ngx-bootstrap schematics.

```bash
ng add ngx-bootstrap --help
```

--------------------------------

### Iterating Over Calendar Days with @for

Source: https://github.com/valor-software/ngx-bootstrap/blob/development/src/datepicker/themes/bs/bs-datepicker-view.html

Utilize @for to loop through a collection, rendering content for each item. This example iterates over the days in a calendar.

```html
@for (calendar of daysCalendar$ | async; track calendar) { }
```

--------------------------------

### Run Unit Tests

Source: https://github.com/valor-software/ngx-bootstrap/blob/development/libs/doc-pages/collapse/README.md

Execute unit tests for the doc-pages-collapse library using the nx command.

```bash
nx test doc-pages-collapse
```

--------------------------------

### Angular Modal Component and Demo

Source: https://context7.com/valor-software/ngx-bootstrap/llms.txt

Demonstrates how to create a custom modal component and use the BsModalService to open it with initial data or custom configurations. Includes handling modal events.

```typescript
import { Component, inject } from '@angular/core';
import { BsModalService, BsModalRef, ModalModule } from 'ngx-bootstrap/modal';

// Modal content component
@Component({
  selector: 'app-custom-modal',
  standalone: true,
  template: `
    <div class="modal-header">
      <h4 class="modal-title">{{ title }}</h4>
      <button type="button" class="btn-close" (click)="bsModalRef.hide()"></button>
    </div>
    <div class="modal-body">
      <p>{{ message }}</p>
      <ul>
        @for (item of items; track item) {
          <li>{{ item }}</li>
        }
      </ul>
    </div>
    <div class="modal-footer">
      <button type="button" class="btn btn-secondary" (click)="bsModalRef.hide()">Close</button>
      <button type="button" class="btn btn-primary" (click)="confirm()">Confirm</button>
    </div>
  `
})
export class CustomModalComponent {
  title = '';
  message = '';
  items: string[] = [];

  constructor(public bsModalRef: BsModalRef) {}

  confirm(): void {
    // Handle confirmation
    this.bsModalRef.hide();
  }
}

// Parent component using the modal
@Component({
  selector: 'app-modal-demo',
  standalone: true,
  imports: [ModalModule],
  template: `
    <button class="btn btn-primary" (click)="openModal()">Open Modal</button>
    <button class="btn btn-secondary" (click)="openModalWithConfig()">Open Configured Modal</button>
  `
})
export class ModalDemoComponent {
  private modalService = inject(BsModalService);
  bsModalRef?: BsModalRef;

  openModal(): void {
    const initialState = {
      title: 'Modal Title',
      message: 'This is a dynamic modal with passed data.',
      items: ['Item 1', 'Item 2', 'Item 3']
    };

    this.bsModalRef = this.modalService.show(CustomModalComponent, { initialState });

    // Subscribe to modal events
    this.bsModalRef.onHidden?.subscribe(() => {
      console.log('Modal hidden');
    });
  }

  openModalWithConfig(): void {
    this.bsModalRef = this.modalService.show(CustomModalComponent, {
      initialState: { title: 'Configured Modal', message: 'Custom configuration' },
      class: 'modal-lg modal-dialog-centered',
      backdrop: 'static',
      keyboard: false,
      animated: true,
      id: 'custom-modal-1'
    });
  }
}

```

--------------------------------

### Run Unit Tests

Source: https://github.com/valor-software/ngx-bootstrap/blob/development/src/accordion/README.md

Execute unit tests for the accordion library using the nx command.

```bash
nx test accordion
```

--------------------------------

### Dropdown Configuration

Source: https://github.com/valor-software/ngx-bootstrap/blob/development/libs/doc-pages/dropdown/src/lib/todo.md

Configures the dropdown's initial state using the `isOpen` property. Requires `BsDropdownModule`.

```typescript
/** if true dropdown will be initially opened */
isOpen:boolean = false;
```

--------------------------------

### Run Unit Tests

Source: https://github.com/valor-software/ngx-bootstrap/blob/development/libs/doc-pages/rating/README.md

Execute unit tests for the doc-pages-rating project using the nx command.

```bash
nx test doc-pages-rating
```

--------------------------------

### NgModule Usage of ModalModule

Source: https://github.com/valor-software/ngx-bootstrap/blob/development/libs/doc-pages/modal/src/lib/docs/usage.md

Include ModalModule in your NgModule imports and provide BsModalService for modal functionality in a traditional Angular module setup.

```typescript
import { ModalModule } from 'ngx-bootstrap/modal';

@NgModule({
  imports: [ModalModule,...],
  providers: [BsModalService]
})
export class AppModule(){}
```

--------------------------------

### Basic Dropdown with Button

Source: https://github.com/valor-software/ngx-bootstrap/blob/development/libs/doc-pages/dropdown/src/lib/todo.md

Demonstrates a simple dropdown triggered by a button. Ensure the `BsDropdownModule` is imported.

```html
<div class="dropdown" dropdown>
  <button class="btn btn-primary" dropdownToggle type="button">
    Dropdown
    <span class="caret"></span>
  </button>
  <ul class="dropdown-menu">
    <li *ngFor="let item of items">
      <a href="#" class="dropdown-item">{{item}}</a>
    </li>
  </ul>
</div>
```

```typescript
import { Component } from '@angular/core';

@Component({
  selector: 'app',
  templateUrl: './app.component.html'
})
export class AppComponent {
  public items: Array<string> = ['The first choice',
    'Second thought',
    'Third option'];
}
```

--------------------------------

### Conditional Rendering with @if

Source: https://github.com/valor-software/ngx-bootstrap/blob/development/src/datepicker/themes/bs/bs-datepicker-view.html

Use @if to conditionally render content based on a boolean expression. This example shows rendering based on an observable view mode.

```html
@if (viewMode | async) {

}
```

--------------------------------

### Run Unit Tests

Source: https://github.com/valor-software/ngx-bootstrap/blob/development/libs/doc-pages/tabs/README.md

Execute unit tests for the doc-pages-tabs library using the nx command.

```bash
nx test doc-pages-tabs
```

--------------------------------

### Run Unit Tests for Collapse

Source: https://github.com/valor-software/ngx-bootstrap/blob/development/src/collapse/README.md

Execute unit tests for the collapse module using the nx test command. Ensure all tests pass before merging changes.

```bash
nx test collapse
```

--------------------------------

### Standalone Component Usage of ModalModule

Source: https://github.com/valor-software/ngx-bootstrap/blob/development/libs/doc-pages/modal/src/lib/docs/usage.md

Import ModalModule and provide BsModalService when using modals within a standalone Angular component. The module import can be optional depending on your setup.

```typescript
import { ModalModule, BsModalService } from 'ngx-bootstrap/modal';

@Component({
  standalone: true,
  imports: [ModalModule,...], // module can be optional
  providers: [BsModalService]
})
export class AppComponent(){}
```

--------------------------------

### Basic Tabs Component Usage

Source: https://context7.com/valor-software/ngx-bootstrap/llms.txt

Demonstrates the basic structure for creating tabs with headings and content. Ensure TabsModule is imported.

```typescript
import { Component } from '@angular/core';
import { TabsModule } from 'ngx-bootstrap/tabs';
import { FormsModule } from '@angular/forms';

@Component({
  selector: 'app-tabs-demo',
  standalone: true,
  imports: [TabsModule, FormsModule],
  template: Я`
    <!-- Basic tabs -->
    <tabset>
      <tab heading="Home">
        <p>Home content goes here.</p>
      </tab>
      <tab heading="Profile">
        <p>Profile information displayed here.</p>
      </tab>
      <tab heading="Messages" [disabled]="true">
        <p>This tab is disabled.</p>
      </tab>
    </tabset>
 Я`
})
export class TabsDemoComponent {}
```

--------------------------------

### Typeahead Hide Results On Blur Example

Source: https://github.com/valor-software/ngx-bootstrap/blob/development/libs/doc-pages/typeahead/src/lib/demos/show-on-blur/show-on-blur.html

Demonstrates how to configure the typeahead to hide results when the input element loses focus. This is useful for improving user experience by closing the dropdown when the user clicks outside the input.

```html
typeaheadHideResultsOnBlur: {{typeaheadHideResultsOnBlur}}
  Model: {{selected | json}}
```

--------------------------------

### Run Unit Tests for Locale

Source: https://github.com/valor-software/ngx-bootstrap/blob/development/src/locale/README.md

Execute unit tests for the locale module using the Nx command-line tool. Ensure you are in the project directory.

```bash
nx test locale
```

--------------------------------

### Run Unit Tests for Chronos

Source: https://github.com/valor-software/ngx-bootstrap/blob/development/src/chronos/README.md

Execute unit tests for the Chronos library using the nx test command. Ensure you are in the project directory.

```bash
nx test chronos
```

--------------------------------

### Manually Set Bootstrap Version

Source: https://github.com/valor-software/ngx-bootstrap/blob/development/libs/common-docs/src/lib/common/documentation/documentation.component.html

Use this method when ngx-bootstrap's automatic version detection fails, for example, due to conflicting libraries or custom Bootstrap versions. Import `setTheme` from 'ngx-bootstrap/utils' and call it with 'bs5' or 'bs4'.

```typescript
import {setTheme} from 'ngx-bootstrap/utils';

@Component({...})
export class AppComponent {
  constructor() {
    setTheme('bs5'); // or 'bs4'
    …
  }
}
```

--------------------------------

### Basic Collapse and Multiple Sections

Source: https://context7.com/valor-software/ngx-bootstrap/llms.txt

Demonstrates basic collapsible content and multiple collapsible sections using the Collapse directive. Ensure the CollapseModule is imported.

```typescript
import { Component } from '@angular/core';
import { CollapseModule } from 'ngx-bootstrap/collapse';

@Component({
  selector: 'app-collapse-demo',
  standalone: true,
  imports: [CollapseModule],
  template: `
    <!-- Basic collapse -->
    <button type="button" class="btn btn-primary"
            (click)="isCollapsed = !isCollapsed"
            [attr.aria-expanded]="!isCollapsed">
      Toggle Content
    </button>

    <div [collapse]="isCollapsed" [isAnimated]="true">
      <div class="card card-body mt-2">
        This content can be toggled. It uses CSS transitions for smooth animation.
      </div>
    </div>

    <!-- Multiple collapsible sections -->
    <div class="mt-4">
      <button class="btn btn-info me-2" (click)="section1 = !section1">Section 1</button>
      <button class="btn btn-info me-2" (click)="section2 = !section2">Section 2</button>
      <button class="btn btn-info" (click)="section3 = !section3">Section 3</button>

      <div [collapse]="section1" class="mt-2">
        <div class="alert alert-primary">Section 1 content</div>
      </div>

      <div [collapse]="section2" class="mt-2">
        <div class="alert alert-success">Section 2 content</div>
      </div>

      <div [collapse]="section3" class="mt-2">
        <div class="alert alert-warning">Section 3 content</div>
      </div>
    </div>

    <!-- Collapse with events -->
    <button class="btn btn-secondary mt-4" (click)="eventCollapse = !eventCollapse">
      Toggle with Events
    </button>

    <div [collapse]="eventCollapse"
         (collapsed)="onCollapsed()"
         (expanded)="onExpanded()">
      <div class="card card-body mt-2">
        This section emits events when collapsed or expanded.
      </div>
    </div>
    <p>Status: {{ collapseStatus }}</p>
  `
})
export class CollapseDemoComponent {
  isCollapsed = false;
  section1 = true;
  section2 = true;
  section3 = true;
  eventCollapse = true;
  collapseStatus = 'Collapsed';

  onCollapsed(): void {
    this.collapseStatus = 'Collapsed';
    console.log('Content collapsed');
  }

  onExpanded(): void {
    this.collapseStatus = 'Expanded';
    console.log('Content expanded');
  }
}

```

--------------------------------

### Handle Outside Click Event - TypeScript

Source: https://github.com/valor-software/ngx-bootstrap/blob/development/docs/spec/popover/popover.examples.outside-click.use-case.md

Implement the `outsideClick` method in your component to handle the event when a click occurs outside the popover. This example shows a basic implementation that might be used to perform additional actions or simply allow the default closing behavior.

```typescript
import { Component } from '@angular/core';

@Component({
  selector: 'app',
  templateUrl: './app.component.html'
})
export class AppComponent {
  outsideClick(): void {
    console.log('Popover outside click detected!');
  }
}
```

--------------------------------

### Date Picker with Locale Support

Source: https://github.com/valor-software/ngx-bootstrap/blob/development/libs/doc-pages/datepicker/src/lib/demos/change-locale/change-locale.html

Demonstrates iterating through locales for the Date Picker component. Ensure locales are properly imported and configured.

```html
@for (loc of locales; track loc) { {{ loc }} }
```

--------------------------------

### Basic Dropdown with BsDropdownModule

Source: https://context7.com/valor-software/ngx-bootstrap/llms.txt

Demonstrates a standard dropdown menu using the 'dropdown' directive. Ensure BsDropdownModule is imported. The 'dropdownToggle' directive is applied to the button that triggers the dropdown, and '*dropdownMenu' is used on the `<ul>` element.

```typescript
import { Component } from '@angular/core';
import { BsDropdownModule } from 'ngx-bootstrap/dropdown';

@Component({
  selector: 'app-dropdown-demo',
  standalone: true,
  imports: [BsDropdownModule],
  template: `
    <!-- Basic dropdown -->
    <div class="btn-group" dropdown>
      <button id="button-basic" dropdownToggle type="button"
              class="btn btn-primary dropdown-toggle">
        Dropdown <span class="caret"></span>
      </button>
      <ul *dropdownMenu class="dropdown-menu" role="menu">
        <li role="menuitem"><a class="dropdown-item" href="#">Action</a></li>
        <li role="menuitem"><a class="dropdown-item" href="#">Another action</a></li>
        <li role="menuitem"><a class="dropdown-item" href="#">Something else</a></li>
        <li class="divider dropdown-divider"></li>
        <li role="menuitem"><a class="dropdown-item" href="#">Separated link</a></li>
      </ul>
    </div>

    <!-- Dropup with animation -->
    <div class="btn-group" dropdown [dropup]="true" [isAnimated]="true">
      <button dropdownToggle type="button" class="btn btn-secondary dropdown-toggle">
        Dropup Animated <span class="caret"></span>
      </button>
      <ul *dropdownMenu class="dropdown-menu">
        <li><a class="dropdown-item" href="#">Action</a></li>
        <li><a class="dropdown-item" href="#">Another action</a></li>
      </ul>
    </div>

    <!-- Dropdown with auto-close disabled -->
    <div class="btn-group" dropdown [autoClose]="false" [insideClick]="true">
      <button dropdownToggle type="button" class="btn btn-info dropdown-toggle">
        Manual Close <span class="caret"></span>
      </button>
      <ul *dropdownMenu class="dropdown-menu">
        <li><a class="dropdown-item" href="#">Click won't close</a></li>
        <li><a class="dropdown-item" href="#">Use button below</a></li>
        <li><button class="dropdown-item btn" (click)="manualClose()">Close Menu</button></li>
      </ul>
    </div>

    <!-- Programmatic control -->
    <div class="btn-group" dropdown #dropdownRef="bs-dropdown"
         (isOpenChange)="onOpenChange($event)">
      <button dropdownToggle type="button" class="btn btn-warning dropdown-toggle">
        Controlled <span class="caret"></span>
      </button>
      <ul *dropdownMenu class="dropdown-menu">
        <li><a class="dropdown-item" href="#">Item 1</a></li>
        <li><a class="dropdown-item" href="#">Item 2</a></li>
      </ul>
    </div>
    <button class="btn btn-sm" (click)="dropdownRef.show()">Show</button>
    <button class="btn btn-sm" (click)="dropdownRef.hide()">Hide</button>
  `
})
export class DropdownDemoComponent {
  onOpenChange(isOpen: boolean): void {
    console.log('Dropdown is open:', isOpen);
  }

  manualClose(): void {
    // Handle manual close logic
  }
}

```

--------------------------------

### Button Variants for Dropdown

Source: https://github.com/valor-software/ngx-bootstrap/blob/development/libs/doc-pages/dropdown/src/lib/todo.md

Illustrates using different button styles for the dropdown toggle. Import `BsDropdownModule`.

```html
<div class="dropdown" dropdown>
  <button class="btn btn-success" dropdownToggle type="button">
    Success
    <span class="caret"></span>
  </button>
  <ul class="dropdown-menu">
    <li *ngFor="let item of items">
      <a href="#" class="dropdown-item">{{item}}</a>
    </li>
  </ul>
</div>

<div class="dropdown" dropdown>
  <button class="btn btn-info" dropdownToggle type="button">
    Info
    <span class="caret"></span>
  </button>
  <ul class="dropdown-menu">
    <li *ngFor="let item of items">
      <a href="#" class="dropdown-item">{{item}}</a>
    </li>
  </ul>
</div>
```

--------------------------------

### Basic Rating Component Usage

Source: https://github.com/valor-software/ngx-bootstrap/blob/development/libs/doc-pages/rating/src/lib/demos/dynamic/dynamic.html

Demonstrates the basic implementation of the rating component. Use this for a simple star rating interface.

```html
<rating [(ngModel)]="rate" [max]="max"></rating>
<p class="c-rating-stars">Percent: {{percent}}%</p>
<p>Readonly is: {{isReadonly}};</p>
<p>Hovering over: {{overStar || "none"}}</p>
```

--------------------------------

### Rating Component with Event Handling

Source: https://github.com/valor-software/ngx-bootstrap/blob/development/libs/doc-pages/rating/src/lib/demos/dynamic/dynamic.html

Shows how to bind to events like mouse enter and leave for hover effects, and how to manage readonly state.

```html
<rating
  [(ngModel)]="rate"
  [max]="max"
  [readonly]="isReadonly"
  (onHover)="overStar = $event"
  (onLeave)="overStar = 0"
></rating>

<p class="c-rating-stars">Percent: {{percent}}%</p>
<p>Readonly is: {{isReadonly}};</p>
<p>Hovering over: {{overStar || "none"}}</p>

<button type="button" class="btn btn-sm btn-primary" (click)="toggleRating()">
  Toggle Readonly
</button>
```

--------------------------------

### Displaying Time with Custom Second Step in ngx-bootstrap

Source: https://github.com/valor-software/ngx-bootstrap/blob/development/libs/doc-pages/timepicker/src/lib/demos/custom/custom.html

Illustrates displaying the current time and iterating through custom second step options. The 'options.sstep' must be defined in your component's logic.

```html
Seconds step is: @for (opt of options.sstep; track opt) { {{opt}} }
```

--------------------------------

### Basic Popover with Placements

Source: https://github.com/valor-software/ngx-bootstrap/blob/development/libs/doc-pages/popover/src/lib/demos/corner-placement/corner-placement.html

Iterates through a list of placements to display popovers. Ensure the 'placements' array is defined in your component.

```html
@for (placement of placements; track placement) { {{ placement }} }

{{ 'Popover on ' + placement }}
```

--------------------------------

### Displaying Time with Custom Minute Step in ngx-bootstrap

Source: https://github.com/valor-software/ngx-bootstrap/blob/development/libs/doc-pages/timepicker/src/lib/demos/custom/custom.html

Shows how to display the current time and iterate over custom minute step options for the timepicker. The 'options.mstep' array should be configured in your component.

```html
Minutes step is: @for (opt of options.mstep; track opt) { {{opt}} }
```

--------------------------------

### ngx-bootstrap Component API

Source: https://github.com/valor-software/ngx-bootstrap/blob/development/libs/common-docs/src/lib/api-docs/api-doc-class/api-doc-class.component.html

API documentation for individual ngx-bootstrap components, outlining their properties and methods.

```APIDOC
## Component API Documentation

### Description
This section details the properties and methods available for a specific ngx-bootstrap component.

### Properties
Properties define the configurable attributes of a component.

- **`propertyName`** (type) - Description of the property.
  - _Type:_ `string`
  - _Default value:_ `defaultValue`

### Methods
Methods represent the actions or functions a component can perform.

- **`methodName`** (Signature: `methodSignature()`) - Return type: `returnType`
  - _Signature:_ `(param1: type1, param2: type2)`
  - _Return type:_ `void`
```

--------------------------------

### Configure Datepicker and Daterangepicker in Angular

Source: https://context7.com/valor-software/ngx-bootstrap/llms.txt

Shows how to use the bsDatepicker and bsDaterangepicker directives for single date selection, date ranges, and inline display. Includes configuration for date format, min/max dates, disabled dates, and localization.

```typescript
import { Component } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { BsDatepickerModule, BsDatepickerConfig, BsLocaleService } from 'ngx-bootstrap/datepicker';
import { defineLocale } from 'ngx-bootstrap/chronos';
import { deLocale } from 'ngx-bootstrap/locale';

// Register German locale
defineLocale('de', deLocale);

@Component({
  selector: 'app-datepicker-demo',
  standalone: true,
  imports: [FormsModule, BsDatepickerModule],
  template: `
    <!-- Basic datepicker -->
    <input type="text"
           class="form-control"
           bsDatepicker
           [(ngModel)]="selectedDate"
           placeholder="Select date"
           (bsValueChange)="onDateChange($event)">

    <!-- Datepicker with configuration -->
    <input type="text"
           class="form-control"
           bsDatepicker
           [(ngModel)]="configuredDate"
           [bsConfig]="dateConfig"
           [minDate]="minDate"
           [maxDate]="maxDate"
           [datesDisabled]="disabledDates"
           placeholder="Configured datepicker">

    <!-- Date range picker -->
    <input type="text"
           class="form-control"
           bsDaterangepicker
           [(ngModel)]="dateRange"
           [bsConfig]="rangeConfig"
           placeholder="Select date range">

    <!-- Inline datepicker -->
    <bs-datepicker-inline
      [(bsValue)]="inlineDate"
      [bsConfig]="{ showWeekNumbers: true }">
    </bs-datepicker-inline>

    <p>Selected: {{ selectedDate | date:'fullDate' }}</p>
    <p>Range: {{ dateRange?.[0] | date:'shortDate' }} - {{ dateRange?.[1] | date:'shortDate' }}</p>
  `,
  providers: [BsDatepickerConfig]
})
export class DatepickerDemoComponent {
  selectedDate?: Date;
  configuredDate?: Date;
  inlineDate = new Date();
  dateRange?: (Date | undefined)[];

  minDate = new Date();
  maxDate = new Date(2025, 11, 31);
  disabledDates = [new Date(2024, 11, 25), new Date(2024, 11, 31)];

  dateConfig: Partial<BsDatepickerConfig> = {
    dateInputFormat: 'DD/MM/YYYY',
    showWeekNumbers: false,
    containerClass: 'theme-green',
    isAnimated: true,
    adaptivePosition: true
  };

  rangeConfig: Partial<BsDatepickerConfig> = {
    rangeInputFormat: 'MMM D, YYYY',
    showWeekNumbers: true
  };

  constructor(private localeService: BsLocaleService) {
    // Set locale to German
    this.localeService.use('de');
  }

  onDateChange(date: Date): void {
    console.log('Date changed:', date);
  }
}

```

--------------------------------

### Split Button Dropdowns

Source: https://github.com/valor-software/ngx-bootstrap/blob/development/libs/doc-pages/dropdown/src/lib/todo.md

Configures a split button dropdown, allowing separate actions for the button and the dropdown menu. Requires `BsDropdownModule`.

```html
<div class="btn-group" dropdown>
  <button type="button" class="btn btn-danger">Action</button>
  <button type="button" class="btn btn-danger" dropdownToggle>
    <span class="caret"></span>
  </button>
  <ul class="dropdown-menu">
    <li *ngFor="let item of items">
      <a href="#" class="dropdown-item">{{item}}</a>
    </li>
  </ul>
</div>
```

--------------------------------

### ProgressbarComponent Usage in Angular

Source: https://context7.com/valor-software/ngx-bootstrap/llms.txt

Demonstrates various configurations of the Progressbar component, including basic usage, different color types, striped and animated bars, custom max values, stacked progress, and dynamic updates with a simulated upload process. Requires importing ProgressbarModule.

```typescript
import { Component } from '@angular/core';
import { ProgressbarModule } from 'ngx-bootstrap/progressbar';

@Component({
  selector: 'app-progressbar-demo',
  standalone: true,
  imports: [ProgressbarModule],
  template: `
    <!-- Basic progressbar -->
    <progressbar [value]="35"></progressbar>

    <!-- With different types -->
    <progressbar [value]="25" type="success"></progressbar>
    <progressbar [value]="50" type="info"></progressbar>
    <progressbar [value]="75" type="warning"></progressbar>
    <progressbar [value]="100" type="danger"></progressbar>

    <!-- Striped and animated -->
    <progressbar [value]="dynamicValue"
                 [striped]="true"
                 [animate]="true"
                 type="success">
      {{ dynamicValue }}%
    </progressbar>

    <!-- Custom max value -->
    <progressbar [value]="150" [max]="300" type="info">
      150 / 300
    </progressbar>

    <!-- Stacked progressbar -->
    <progressbar [value]="stackedValues" [max]="100"></progressbar>

    <!-- Dynamic update -->
    <progressbar [value]="uploadProgress"
                 [animate]="true"
                 [striped]="uploading">
      {{ uploading ? 'Uploading...' : 'Complete' }} {{ uploadProgress }}%
    </progressbar>
    <button class="btn btn-primary" (click)="simulateUpload()">
      Start Upload
    </button>
  `
})
export class ProgressbarDemoComponent {
  dynamicValue = 65;
  uploadProgress = 0;
  uploading = false;

  stackedValues = [
    { value: 35, type: 'success' },
    { value: 25, type: 'warning' },
    { value: 15, type: 'danger' }
  ];

  simulateUpload(): void {
    this.uploading = true;
    this.uploadProgress = 0;

    const interval = setInterval(() => {
      this.uploadProgress += 10;
      if (this.uploadProgress >= 100) {
        clearInterval(interval);
        this.uploading = false;
      }
    }, 500);
  }
}
```