How can I bind data to the html attribute in Angular4?

Question

I am using the *ngFor directive to populate a series of divs. I am also using the bootstrap library for css.

<div data-toggle="collapse" data-target="#toggleDemo"*ngFor="let pair of pairings">
    <div data-target="#toggleDemo">
    </div>
</div>

I am going to have a number of these entries and I want to use expand/collapse from bootstrap. In order to get this to work, each div must have a unique data-target attribute value.

I want to use one of the properties from my 'pair' object but each time I try it, I get an error.

Is it possible to do something like this in Angular4?

<div data-target="#toggleDemo-"{{ pair.id }}>

Edit:

I have tried this approach

<div data-toggle="collapse" data-target="#toggleDemo-{{ pair.id }}">

and I get this error:

Template parse errors:
Can't bind to 'target' since it isn't a known property of 'div'. ("v class="row" *ngFor="let pair of pairings">
            <div class="wall col-sm-2" data-toggle="collapse" [ERROR ->]data-target="#toggleDemo-{{ pair.buyer.phone }}">
                <p>{{ pair.buyer.name.first }} {{ pair.buyer.na"): ng:///AppModule/PairingsComponent.html@4:52 ; Zone: <root> ; Task: Promise.then ; Value: Error: Template parse errors:
    Can't bind to 'target' since it isn't a known property of 'div'. ("v class="row" *ngFor="let pair of pairings">

Edit:

I have tried what the answers suggest but none of the solutions worked out.

Günter Zöchbauer · Accepted Answer · 2020-06-15 17:58:53Z

9

Angular by default does property binding. In your case you need attribute binding because that property is not reflected to an attribute automatically:

<div attr.data-target="#toggleDemo-{{ pair.id }}">

or

<div [attr.data-target]="'#toggleDemo-' + pair.id">

edited Jun 15, 2020 at 17:58

answered Apr 15, 2017 at 20:58

Günter Zöchbauer

662k235 gold badges2.1k silver badges1.6k bronze badges

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

5 Comments

Günter Zöchbauer Over a year ago

What does "not work" mean exactly? Same error medsage as before?

user1261710 Over a year ago

The second one does not have an error but it does not do the toggle and the first one has a parse error in the console much like the one I posted in the question.

Günter Zöchbauer Over a year ago

Sorry, the first had a redundant ". What do you mean with "it doesn't do the toggle"

Günter Zöchbauer Over a year ago

Both should do the same. Thanks for the feedback.

Martins Over a year ago

Awesome dude! Works like a charm.

zigzag · Accepted Answer · 2017-04-15 20:16:34Z

1

Absolutely, just include the interpolation and curly braces within the string there.

<div data-target="#toggleDemo-{{ pair.id }}">

answered Apr 15, 2017 at 20:16

zigzag

3212 silver badges13 bronze badges

Collectives™ on Stack Overflow

How can I bind data to the html attribute in Angular4?

2 Answers 2

5 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

5 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related