Custom attribute binding in HTML

Question

Using Angular 5, I bind data-target as [attr.data-target]="id"

JavaScript Object

var ids = [1, 2]; 

HTML

<div *ngFor="let id in ids">
    <p [attr.data-target]="id"></p>
</div>

which gets rendered as

<div>
    <p data-target="1"></p>
    <p data-target="2"></p>
</div>

The aim is achieve something like

<div>
    <p data-target="collapse1"></p>
    <p data-target="collapse2"></p>
</div>

How to prepend/append some static string to attributes (date-, aria)?

Answer 1

There are several ways to accomplish this:

Interpolation

attr.data-target="collapse{{id}}"

Attribute binding

[attr.data-target]="'collapse' + id"

Attribute binding canonical form

bind-attr.data-target="'collapse' + id"

Using custom method

ts

getTarget(id) {
  return `collapse${id}`;
}

html

[attr.data-target]="getTarget(id)"

or

bind-attr.data-target="getTarget(id)"

Live example on ng-run

Answer 2

It works the same way you append with two way binding variable, in this case

<p [attr.data-target]="'collapse' + id">