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.

Answer 1

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">

Answer 2

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

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