Collapse stopped working after #26630 PR merge i.e in v4.1.2

[ernitishkumar]

I was using collapse via Angular directive which was dynamically creating parent and child elements for collapse.

Everything was working fine until Bootstrap version 4.1.1. But after upgrading to version v4.1.2 it seems to be not working.

After going through the ship list of v4.1.1 I found that due to PR #26630 It may have stopped working.

Can anyone suggest some solution or new workaround.

Below is my table code where I am using collapse under directive of angular.

https://jsbin.com/yiqawiqone/edit?html

[Johann-S]

Bug reports must include a live demo of the problem. Per our contributing guidelines, please create a reduced test case via StackBlitz and report back with your link, Bootstrap version, and specific browser and OS details.

[ernitishkumar]

Here is the StackBlitz test case for Boostrap v4.1.2 in which the embed collapse item under Angular's ng-template directive does not works.

Bootstrap v4.1.2 TestCase

Angular Version 6.1.0
Bootstrap : v4.1.2
Browser : Chrome 68.0.3440.75
Os : Windows 10 x64

And here is with Bootstrap v4.1.1 in which the same code works i.e the collapse items work as per desired.
Bootstrap v4.1.1 Working TestCase

Angular Version 6.1.0
Bootstrap : v4.1.1
Browser : Chrome 68.0.3440.75
Os : Windows 10 x64

[Johann-S]

That's because you use bad ids

For example in your StackBlitz (https://angular-ylnusl.stackblitz.io/) if you try to do : document.querySelector('#0') it'll fail because with an error

And that's what is done by Bootstrap under the hood, because we changed how we get our DOM elements, before we used jQuery, now we use native methods (querySelector, querySelectorAll)

I fixed your code with valid ids see: https://stackblitz.com/edit/angular-bo4bpw?file=src/app/app.component.html

I added a letter to your ids thats why it works now.

BTW a new release is out 4.1.3 😉

[ernitishkumar]

Ok got the issue !
Thanks for the response and fix 👍