angular - Accordion is not opening after binding data from API in Angular4

Question

Working in an Angular 4 application ,In this I have accordion inside accordion,Now I am trying to bind the accordion dynamically from API response (json).

Here in my case the accordion header is binding but not the inner options are not getting bind .

I can't say exactly whether it's binding but not open or it is not get bind.

Working Example with static values:

https://stackblitz.com/edit/angular-9cuvb9?file=app%2Fapp.component.html

Dynamic binding :(with Issue)

https://stackblitz.com/edit/angular-bootstrap-carousel-dynamic2-jwb2zj?file=app/app.component.html

Can anyone help me to solve this.

Answer 1

I am not fully aware of the exact goal you try to achieve, but in dynamic version you set data target - href="#collapseInnerTwo" and in id of collapsable you try to evaluate some expression - [id]="'collapseInnerTwo' + group?.CAMD_PRGRP_DESC"

These will never match and never collapse. If you change

[id]="'collapseInnerTwo' + group?.CAMD_PRGRP_DESC"

To

id="collapseInnerTwo"

It works as supposed