1

I am tying to bind the api response (json) in accordion menu ,Here everything is working fine but in accordion I have category,group and subgroup .

In category there is one value is json, In group there are 4 values but in my case it is binding only one Each group has 2 subgroups

Here I have attached the working example of my case ,Please refer this and guide me to bind every single data in json

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

3 Answers 3

2

The problem is that you run *ngFor and set same ids and data-targets. To solve that you can use indexes *ngFor creates in every loop.

To use them you must assign a template expression to HTML attributes. Example:

<div *ngFor='let group of data; let j=index'>
  <input [id]="'id' + j" />
</div>

See the working DEMO here

Sign up to request clarification or add additional context in comments.

5 Comments

In this accordion how can I programmatically open the category menu only.
Most straightforward way might be to mimic click event. Like getElementById etc., but in Angular way - with @ViewChild(). Or maybe there is a better way. You should make a new question for this
Problem is that you try to use groupcode and other two variables out of their templates scopes - [C_code]="categorycode". I have couple ideas and will post after i test it out
okay thanks ,I am looking for your solution ...Thanks for your time
Can you please help me to fix this stackoverflow.com/questions/51281799/… @fromZerotoHero
1

Your *ngFor directive is on the wrong element. Please look at the updated StackBlitz snippet:

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

6 Comments

under indian spices it shows 4 groups ,it opens first group(pepper) if I clicked on all the gruops please check it. Please click on every group under indian spices you will came to know the issue
Sure, but that problem is unrelated to your original question. The problem you're seeing now is all of your ids (id="collapseInnerTwo", for instance) are the same for multiple elements (you are iterating over groups), so the accordion library doesn't "know" which one to target, so it targets the first one. You should probably dynamically add some kind of sufix to your ids. (id="collapseInnerTwo_{{j}}")
Will post another question regarding this can you give me the solution there
I just gave you the solution. Don't give the same id to multiple HTML elements. (id="collapseInnerTwo_{{j}}") Try to implement it yourself and feel free to ask me anything in chat if you get stuck.
sure and Thanks
|
1

Use this code:

<div id="collapseTwo"  class="accordion-body collapse" style="margin-left:10px">
            <div class="accordion-inner" *ngFor='let group of data?.group; let j=index'>
                <div class="accordion" id="accordion2">
                    <div class="accordion-group">
                        <div class="accordion-heading">
                            <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion2" href="#collapseInnerTwo_{{j}}">
                                {{group?.CAMD_PRGRP_DESC}}
                            </a>
                        </div>
                        <div id="collapseInnerTwo_{{j}}" class="accordion-body collapse" style="margin-left:10px;margin-top:3px">
                            <div class="accordion-inner" *ngFor='let subgroup of group?.subgroup; let i=index'>
                                {{subgroup?.CAMD_PRSGRP_DESC}}
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

3 Comments

if I remove it ,then all the data are directly shown ,But I want to shown the data when a user clicked on it
@Nikson Ok, I updated the answer. pls refer it again.
Please check ritaj's answer he also said the same but there also an issue please click on all groups it will open only the first group

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.