repository·development·Indexed 26 days ago
https://github.com/valor-software/ngx-bootstrapA library providing Bootstrap components for Angular applications, enabling Bootstrap's UI capabilities without the original Bootstrap JavaScript. Version 21.2.1 requires Angular's zoneless change detection and utilizes signal-based inputs and output functions. The library includes components such as Accordion and Alerts, and provides a compatibility matrix for Angular and Bootstrap CSS versions.
ngx-bootstrap. This allows you to trigger the toggle state of specific panels via buttons or other UI elements rather than relying solely on user clicks on the accordion headers.BsModalService to open modals, you can control whether the modal includes animation effects. This is typically managed by passing configuration options to the service. In the context of ngx-bootstrap, this allows users to toggle between animated and non-animated modal popups, which can be useful for performance-sensitive environments or specific UI requirements.When using the BsModalService to open modals, you can subscribe to lifecycle events to execute logic when the modal's visibility state changes. The following events are available:
onShow: Fired when the modal begins to show.onShown: Fired when the modal has been fully shown (animations completed).onHide: Fired when the modal begins to hide.onHidden: Fired when the modal has been fully hidden (animations completed).These events are triggered regardless of how the modal is closed, including via the close button, clicking the backdrop, or pressing the ESC key.
In ngx-bootstrap, the datepicker component can be configured to either close when a user clicks outside the datepicker container or remain open. This behavior is typically controlled by the internal implementation of the datepicker container and its interaction with the document click events.
To achieve a datepicker that closes when clicking outside, ensure the component is used in a way that allows the bs-datepicker-container to detect clicks outside its scope. When a user clicks outside the active container, the container should disappear.
progressbar component by using the ProgressbarConfig object. This allows you to define specific values and types (such as color or thickness) that will be applied to the progressbar instances within that context.BsDropdownConfig object at the module or component level. For example, to prevent dropdowns from automatically closing when an item is clicked, provide BsDropdownConfig with autoClose: false.To use the Typeahead component in a traditional Angular module-based application, import TypeaheadModule and BrowserAnimationsModule into your @NgModule imports array.
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { TypeaheadModule } from 'ngx-bootstrap/typeahead';
@NgModule({
imports: [
BrowserAnimationsModule,
TypeaheadModule,
...
],
// ...
})
export class AppModule {}You can monitor when the bs-datepicker-container is opened or closed by subscribing to the visibility events provided by the ngx-bootstrap Datepicker.
AlertModule from ngx-bootstrap/alert and add it to the imports array of your @NgModule decorator.To create a dynamic timepicker component, you can programmatically control the hour, minute, and AM/PM state. In a dynamic implementation, clicking external buttons can update the component's inputs to specific values (e.g., setting the time to 14:00) or clear the inputs to show placeholders (e.g., 'HH' and 'MM') and reset the period to 'AM'.
Key behaviors for a dynamic timepicker include:
ngx-bootstrap dropdown by subscribing to its state change events. This allows you to trigger side effects, such as updating UI elements (e.g., showing/hiding cards or status messages) when the dropdown opens or closes.