0

Lets say I've got a collapsible menu with two buttons that will display their corresponding content when clicked. If one is opened, it should close when the other button is clicked. I want to repeat this content x number of times.

<div *ngFor="let item of array; let i = index" class="container" id="myGroup">
    <p>
        <a class="btn btn-primary" data-toggle="collapse" href="#collapseExample" role="button" aria-expanded="false" aria-controls="collapseExample">
            content 1
        </a>
        <button class="btn btn-primary" type="button" data-toggle="collapse" data-target="#collapseExample2" aria-expanded="false" aria-controls="collapseExample2">
            Content 2
        </button>
    </p>

    <div class="collapse" id="collapseExample" data-parent="#myGroup">
        <div class="card card-body">
            Content 1 here 
        </div>
    </div>
    <div class="collapse" id="collapseExample2" data-parent="#myGroup">
        <div class="card card-body">
            Content 2 here 
        </div>
    </div>
</div>

I want each of divs with the class container to have their own unique id to match with its content's data-parent attribute. Something like this: 

<div *ngFor="let item of array; let i = index" class="container" id="myGroup{{i}}">
    <p>
        <a class="btn btn-primary" data-toggle="collapse" href="#collapseExample" role="button" aria-expanded="false" aria-controls="collapseExample">
            content 1
        </a>
        <button class="btn btn-primary" type="button" data-toggle="collapse" data-target="#collapseExample2" aria-expanded="false" aria-controls="collapseExample2">
            Content 2
        </button>
    </p>

    <div class="collapse" id="collapseExample" data-parent="#myGroup{{i}}">
        <div class="card card-body">
            Content 1 here 
        </div>
    </div>
    <div class="collapse" id="collapseExample2" data-parent="#myGroup{{i}}">
        <div class="card card-body">
            Content 2 here 
        </div>
    </div>
</div>

My goal is to create a couple of buttons that I can print to the page x number of times. Each time a new set is printed to the page, it's buttons will only respond to its unique ids and data-parents. I tried it just like what I included above, but got the following error: Uncaught Error: Template parse errors: Can't bind to 'parent' since it isn't a known property of 'div'.

Is this even possible? Any help is appreciated.

2 Answers2

1

You should use [attr.data-parent] to set the data-parent attibute.

in your case [attr.data-parent] =" '#myGroup' + i"

Sayooj V R
  • 2,255
  • 2
  • 11
  • 23
0

Use attribute binding syntax instead

Eg

[attr.data-parent]="'#myGroup' + i"

and you can also check with condition i am giving you an example link

How to add conditional attribute in Angular 2?

Kiran Mistry
  • 2,614
  • 3
  • 12
  • 28