Bootstrap Collapse JS API with Angular

[morrica]

Alright, I'm not filing this under bugs, but I'd really like someone who knows what their doing to tell me why this is not a bug. And I'm going to do something dastardly and include a full chatgpt chat on the subject, including hallucinations, for you to peruse.

The Tl;DR of that is that I am using bootstrap v5.3 with angular v19 and am generally using functionality that takes advantage of data-bs-toggle (Dropdowns, Collapses) all over the site. In one area I want to use the bootstrap JS API to show (not toggle) a particular collapse. Integrating the code to do that into my angular component any which way me or the AI can think of results in either it simply not working, or it breaks all data-bs-toggle functionality all over the page!

I would love someone to tell me how stupid I am. Preferably in a constructive fix the problem way rather than a non-constructive that's what you get for using angular way.

Anyway, feel free to have fun with this one...

---

Edited by maintainer: hidden the PDF link for security reasons. If OP can copy and paste the content here 🙏

---

Here is the content pasted from the previous chatgpt pdf transcript as suggested by the maintainer, but due to formatting it is basically unreadable. :-(

Angular Bootstrap Collapse Toggle
Using angular v19 and bootstrap v5.3, I would like to
activate a bootstrap collapse by calling a function in my
angular component. How can I do this?
To programmatically toggle a Bootstrap 5.3 Collapse from an Angular v19 component, you
can use Bootstrap’s JavaScript API ( Collapse class from bootstrap ) in combination with
@ViewChild or document.querySelector .
Here's a step-by-step example:
✅ 1. Install Bootstrap (if not already done)
Then include it in angular.json or your styles/scripts config.
✅ 2. Import Bootstrap Collapse JS (important!)
Angular doesn't automatically include Bootstrap JS, so you must do it manually. Either:
Include it in angular.json :
OR
Dynamically import in your component:
bash
npm install bootstrap
json
"scripts": ["./node_modules/bootstrap/dist/js/bootstrap.bundle.min.js"]
ts
import { Collapse } from 'bootstrap';
1/19
✅ 3. Template: Add the collapsible content
✅ 4. Component: Control the Collapse
html

<button (click)="toggleCollapse()">Toggle Collapse

This is collapsible content.

ts // template.component.ts import { Component, ElementRef, ViewChild } from '@angular/core'; import { Collapse } from 'bootstrap'; @component({ selector: 'app-template', templateUrl: './template.component.html', }) export class TemplateComponent { @ViewChild('collapseDiv', { static: true }) collapseDiv!: ElementRef; private bsCollapse!: Collapse; ngOnInit() { this.bsCollapse = new Collapse(this.collapseDiv.nativeElement, { toggle: false, // Important: don’t toggle immediately }); } toggleCollapse() { this.bsCollapse.toggle(); 2/19 ✅ Notes toggle: false ensures the collapse is not toggled immediately on init. You can also use .show() and .hide() methods instead of .toggle() . Would you like an example using signals or reactive state to drive the collapse? } } This works but it prevents my from using the data-toggle method of toggling the collapse as well. Possibly because the new Collapse() call in ngOnInit() reinitializing the collapse the data-toggle is set to use. I would like to be able to use the data-toggle and the function in my component to toggle the collapse. Is this possible? You're absolutely right — when you instantiate a Bootstrap Collapse instance manually with new Collapse(...) , it overrides or duplicates the behavior that the data-bstoggle="collapse" mechanism sets up automatically via Bootstrap’s internal initialization. This leads to conflicts where toggling via a button using data-bs-toggle no longer works. ✅ Goal Recap You want to: Toggle the collapse using both: Angular function ( toggleCollapse() ) HTML button with data-bs-toggle="collapse" ✅ Solution Instead of calling new Collapse(...) manually (which reinitializes it), you can query the existing instance initialized by Bootstrap’s data-bs-toggle mechanism and call its 3/19 methods. Bootstrap 5.3 exposes a way to get the existing instance via: So your Angular code can safely retrieve (but not reinitialize) the component. ✅ Updated Example HTML Component ts Collapse.getOrCreateInstance(element) html Toggle via HTML Toggle via TS

Collapsible content.

4/19 ✅ Why This Works The HTML data-bs-toggle="collapse" initializes the collapse once the page loads. Collapse.getOrCreateInstance(...) allows you to safely access that instance, ensuring you're not creating a duplicate or conflicting one. You can now control the collapse both from HTML and from your component without interference. Would you like this tied to a reactive Angular signal as well? ts import { Component, ElementRef, ViewChild, AfterViewInit } from '@angular/core'; import { Collapse } from 'bootstrap'; @component({ selector: 'app-bootstrap-collapse', templateUrl: './bootstrap-collapse.component.html' }) export class BootstrapCollapseComponent implements AfterViewInit { @ViewChild('collapseDiv') collapseDiv!: ElementRef; private collapseInstance!: Collapse; ngAfterViewInit() { // Don't re-initialize — just retrieve the one created by data-bs-toggle this.collapseInstance = Collapse.getOrCreateInstance(this.collapseDiv.nativeElement); } toggleCollapse() { this.collapseInstance.toggle(); } } Hmm. This is allowing the data-bs-toggle to open the collapse, but it is not closing the collapse when clicked a 5/19 second time. What is going on? Excellent observation — and you're hitting a subtle but known behavior quirk with Bootstrap’s Collapse + Angular + manual control. ❗ What's happening data-bs-toggle="collapse" sets up event handlers via Bootstrap's internal event system (using native JavaScript, not Angular). If you use Collapse.getOrCreateInstance(...) before Bootstrap’s internal initialization (via data-bs-toggle ) happens — e.g., during ngAfterViewInit — you override the internal toggler behavior, or only partially hook into it. As a result, clicking the button opens the collapse, but subsequent clicks do nothing, because the internal toggle state and event handlers are out of sync. ✅ Solution Instead of calling Collapse.getOrCreateInstance() too early, wait until the DOM and Bootstrap's automatic behavior have finished initializing. You can delay the manual access using setTimeout , or better, defer it until after user interaction, like so: ✅ Option 1: Lazy-access the instance only when needed ts toggleCollapse() { const collapseElement = this.collapseDiv.nativeElement; const instance = Collapse.getOrCreateInstance(collapseElement); instance.toggle(); } 6/19 ✅ Option 2: Use a setTimeout to let Bootstrap initialize first (not ideal, but works) ⚠️ But this is a hack. Prefer Option 1. ✅ Bonus Tip: Ensure Bootstrap initializes collapse properly Bootstrap initializes elements marked with data-bs-toggle="collapse" only if the document has fully loaded, or if you explicitly call: You can put this in a DOMContentLoaded listener or call it in a shared Bootstrap-init script if needed. This ensures Bootstrap has already initialized the collapse, and you simply reuse the instance at the moment you need it. ts ngAfterViewInit() { setTimeout(() => { this.collapseInstance = Collapse.getOrCreateInstance(this.collapseDiv.nativeElement); }); } ts import { Collapse } from 'bootstrap'; // Manually initialize everything (only needed if Bootstrap isn't auto-initing) document.querySelectorAll('.collapse').forEach((el) => { Collapse.getOrCreateInstance(el); }); 7/19 ✅ TL;DR Use this pattern in Angular for coexistence with data-bs-toggle : And let Bootstrap own the initialization lifecycle. Would you like this wrapped into a reusable Angular directive or service? ts toggleCollapse() { const instance = Collapse.getOrCreateInstance(this.collapseDiv.nativeElement); instance.toggle(); } Implementing your suggested solution from your TL;DR has led to an interesting discovery. If I use any of the bootstrap Collapse creation methods, 'new Collapse()', 'Collapse.getOrCreateInstance()', or 'Collapse.getInstance()', anywhere on my page it breaks all data-bs-toggle functionality everywhere on the page, even in unrelated components and other bootstrap elements. For instance, it breaks the bootstrap Dropdown functionality elsewhere in the page because that functionality also uses data-bscollapse. Do you know what is causing this? Yes — and you've uncovered a critical but under-documented Bootstrap 5.3 behavior when using its JavaScript APIs manually inside Angular apps. ❗ What’s actually going on Bootstrap v5.3 uses its own data API to automatically initialize components like Collapse, Dropdown, Modal, etc., when the page loads. This is typically done via: js import 'bootstrap'; // or bootstrap.bundle.min.js 8/19 This internally triggers logic that binds event listeners and manages toggler-target relationships ( data-bs-toggle , data-bs-target , etc.). However: This leads to: Buttons with data-bs-toggle="dropdown" or data-bs-toggle="collapse" breaking. Dropdowns and collapses becoming non-functional. Toggle events no longer working across the page. ✅ Why this happens Bootstrap's Data API and manual JS API are not fully isolated. When you manually instantiate a Collapse , you: Overwrite data-bs-toggle behavior by forcibly binding to the element. Cause Bootstrap to skip or fail to attach internal delegated event listeners, especially if Collapse.getOrCreateInstance() is called too early. Potentially register conflicting event handlers. This side-effect cascades across the page, affecting all Bootstrap components that rely on shared initialization or global event delegation. ✅ Best Practices for Angular + Bootstrap 1. Avoid calling Collapse.getOrCreateInstance() or new Collapse() unless absolutely necessary. You don’t need it if you're using data-bs-toggle . 2. Let Bootstrap handle everything via data-bs-toggle if you can. Don't manually interact with the instance. ❗ When you manually create or retrieve any Collapse instance via new Collapse() or Collapse.getOrCreateInstance() before the data API has fully initialized, it shortcircuits Bootstrap’s global auto-initialization lifecycle. 9/19 3. If you need to control a collapse programmatically, manually dispatch a click event to the toggle element instead of calling Collapse methods directly. ✅ Alternative (safe) workaround: Trigger via native click Instead of doing: Do: This: Triggers Bootstrap's own toggle system Doesn't interfere with global event handling Keeps data-bs-toggle functional across the page ✅ Summary Action Effect Collapse.getOrCreateInstance() ✅ Works, but can silently break data-bs-toggle new Collapse() ⚠️ Re-initializes, overrides, and may break dropdowns, modals, and collapses Dispatching click to [data-bs-toggle] ✅ Safe, Bootstrap-friendly, and non-intrusive Letting data-bs-toggle handle everything ✅ Best default behavior in Angular apps ts Collapse.getOrCreateInstance(...).toggle(); // risky ts document.querySelector('[data-bs-target="#collapseExample"]')?.dispatchEvent(new Event('click')); 10/19 Would you like a small Angular directive that safely toggles a collapse via dispatched click, while keeping compatibility intact? Something is still not making sense to me. The data-bstoggle functionality is breaking even if my call to Collapse.getOrCreateInstance() is inside a click handler and the element attached to that handler has not been clicked. I.e. it seems that just having that call somewhere in the code, even if it has not actually been called, triggers the issue. In this case, how can simply having the Collapse function in an uncalled function break the data-bshandling? You're absolutely right to be puzzled — because this behavior is unexpected and subtle. But there is an explanation that makes sense once you understand what Bootstrap's JavaScript does internally — and it’s related not to whether you call Collapse.getOrCreateInstance(...) , but to how the module is imported and bundled in Angular's build system. 🔍 What's Actually Happening Even if your Collapse.getOrCreateInstance(...) call is inside an uncalled function, just importing the Collapse class from Bootstrap like this: …can break data-bs-toggle behaviors across the page. ❗Why? Because just importing Collapse or any other component from Bootstrap's ESM modules disables its auto-initialization via data attributes. ts import { Collapse } from 'bootstrap'; Bootstrap’s data API initialization ( data-bs-toggle , etc.) is only active when you use the full UMD bundle, which includes the automatic behavior for toggling components based on attributes. 11/19 When you use: …you're using tree-shakable, module-scoped Bootstrap, which: Does not globally register event handlers for data-bs-toggle . Assumes you will manage all initialization manually via new Collapse(...) . This means: ✅ The Fix You need to import the Bootstrap UMD bundle, which auto-registers the data-bs-toggle behavior globally. ✅ In angular.json Important: Once you're using this approach, do not also import named ESM modules like import { Collapse } from 'bootstrap' , or you’ll cause conflicts. ✅ Option: Keep Using ESM, But Manually Init If you prefer the import { Collapse } style (e.g. for smaller bundle size), you must manually initialize all collapses, dropdowns, etc., like this: ts import { Collapse } from 'bootstrap'; ✔ You get fine-grained control over components ❌ You lose all data-bs-toggle functionality unless you manually initialize every component json "scripts": ["node_modules/bootstrap/dist/js/bootstrap.bundle.min.js"] This bundle includes Popper.js and registers the global listeners for collapse, dropdown, modal, tooltip, etc. 12/19 Place that in your root component or a bootstrap-init service. ✅ Summary Scenario Result ✅ Only use UMD bootstrap.bundle.min.js in angular.json data-bs-toggle works everywhere automatically ❌ Use import { Collapse } from bootstrap (ESM) data-bs-toggle silently breaks unless you manually init ❌ Mix UMD and ESM Conflicts and breakage (do not mix) ✅ Recommendation for Angular apps: ✅ Use the UMD script in angular.json if you rely on data-bs-toggle . 🚫 Avoid importing individual Bootstrap modules like Collapse unless you want to manually manage every instance. ts import { Collapse, Dropdown } from 'bootstrap'; document.querySelectorAll('[data-bs-toggle="collapse"]').forEach(el => { new Collapse(el); }); document.querySelectorAll('[data-bs-toggle="dropdown"]').forEach(el => { new Dropdown(el); }); 13/19 Would you like a complete example of an Angular Bootstrap setup that preserves full datatoggle functionality while supporting programmatic control? Am I right that using the UMD in angular.json will not allow me to also call Collapse functions in my Angular Components? Yes, you're mostly correct — using the UMD version via angular.json does not make Bootstrap's Collapse class directly importable into your Angular components via ESM import { Collapse } from 'bootstrap' . Here's the full picture: ✅ What Happens When You Use UMD via angular.json When you add this: Angular will: Load the UMD bundle globally at runtime Bootstrap will attach its functionality (like data-bs-toggle ) to the window object ✅ data-bs-toggle , dropdowns, modals, collapse — all work out of the box ❌ You cannot import { Collapse } from 'bootstrap' in your TypeScript code (it’s not available via module import) 🧠 Why You Can’t Use Collapse in Components (with UMD) The UMD bundle is a runtime global script, not a module. So Collapse is not available to ES module imports. However... json "scripts": ["node_modules/bootstrap/dist/js/bootstrap.bundle.min.js"] 14/19 ✅ Workaround: Access Collapse from Global Scope If you still want to programmatically control collapse while using the UMD approach, you can grab the Collapse class off the global window object: 👇 Example: This works because Bootstrap 5.2+ (when using the UMD bundle) exposes all components globally via window.bootstrap . ✅ Summary Use Case UMD in angular.json ESM import { Collapse } data-bs-toggle auto behavior ✅ Yes ❌ No Programmatic use in TS Via window.bootstrap.Collapse ✅ Yes Tree-shaking & minimal bundle ❌ No (includes all components) ✅ Yes Can mix UMD + ESM safely ❌ No ❌ No ✅ Recommendation ts declare const window: any; toggleCollapse() { const el = document.getElementById('collapseExample'); const Collapse = window.bootstrap.Collapse; // Access Collapse from global if (Collapse && el) { const instance = Collapse.getOrCreateInstance(el); instance.toggle(); } } 15/19 If you rely on data-bs-toggle and want to occasionally control a collapse programmatically: ✅ Use the UMD bundle in angular.json ✅ Access Collapse via window.bootstrap.Collapse in your Angular code Would you like me to generate a minimal reusable Angular service or directive that wraps this behavior cleanly? Although the IDE does not show any error, compiling the angular project produces the following error: [ERROR] TS2339: Property 'bootstrap' does not exist on type 'Window & typeof globalThis'. [plugin angularcompiler] src/app/shared/post/post.component.ts:117:28: 117 │ const Collapse = window.bootstrap.Collapse; ╵ ~~~~~~~~~ Thanks — you're encountering that error because TypeScript doesn't know that window.bootstrap exists when you're using the UMD Bootstrap bundle (since it's injected globally at runtime, not typed). ✅ Solution: Extend the global Window interface to declare bootstrap Here’s the correct and type-safe way to handle this in an Angular project: ✅ Step 1: Add the global typing (e.g., in your post.component.ts or a separate types.d.ts file) ts declare global { interface Window { bootstrap: { Collapse: any; // You can add Dropdown, Modal, etc. here if needed }; 16/19 This tells TypeScript: “Yes, I know window.bootstrap will be there at runtime.” You can place this at the top of your component file or ideally in a shared typings file like src/types/bootstrap.d.ts . ✅ Step 2: Use it in your component ✅ Optional: If you want full types You can also install Bootstrap’s types (though they’re incomplete): And reference them, but they mostly cover utility types and won’t cover the global bootstrap object — hence the need for manual declaration. Let me know if you want a global wrapper service that avoids window altogether. } } ts toggleCollapse() { const el = document.getElementById('collapseExample'); if (el) { const collapseInstance = window.bootstrap.Collapse.getOrCreateInstance(el); collapseInstance.toggle(); } } ✅ Now TypeScript won’t complain during compilation, and the runtime behavior will work as expected with UMD-loaded Bootstrap. bash npm install --save-dev @types/bootstrap 17/19 If I put that in a separate types.d.ts file, how do I import it so that it is applied to in my post.component.ts file? Great question — and here's the good news: ✅ Step-by-step to make it work: 1. Create the file Place it in your src/ folder (or a subfolder like src/types/ ), for example: 2. Add this to the file 3. Ensure it's included in TypeScript's compilation As long as the file is under your tsconfig.json 's "include" path (usually "src/**/*" ), it will be picked up automatically. ✅ You don’t need to explicitly import types.d.ts anywhere as long as it's in your tsconfig 's scope (typically under src/ ). TypeScript will automatically include it globally during compilation. bash src/types/bootstrap.d.ts ts // src/types/bootstrap.d.ts export {}; // Ensures this file is treated as a module declare global { interface Window { bootstrap: { Collapse: any; Dropdown?: any; // Optional: add others as needed }; } } 18/19 Here's what it should look like by default: ✅ No need to import it manually in post.component.ts . You can now safely use: with full TypeScript awareness. Let me know if you'd like to create a CollapseService to avoid using window directly in your components. json { "compilerOptions": { ... }, "include": ["src/**/*"] } ts window.bootstrap.Collapse.getOrCreateInstance(...) 19/19

[mrholek]

If you are using Angular, you can utilize Bootstrap's native implementations, e.g., https://coreui.io/angular/docs/components/collapse/ or https://valor-software.com/ngx-bootstrap/components/collapse?tab=overview.

[JamesVanWaza]

Or https://ng-bootstrap.github.io/#/components/accordion/overview

[morrica]

I want to avoid using the native implementations because in my past experience it has resulted difficulty with bootstrap features that might not be completely implemented yet or may be from newer versions of bootstrap. Of course, now we see that sticking to the generic bootstrap version is not without its own roadblocks. Thanks for your suggestions though :-)