Angular: data binding to data attributes does not work

Question

I have following code where I add data attribute data-description

<span *ngFor="let item of images">

<img
        src="{{ item.url }}"
        alt="{{ item.name }}"
        data-description="{{ item.description }}"
      />
</span>

The generated html code is

<span>    
    <img
            src="url/here"
            alt="name/here"
          />
    </span>

As you can see data-description does not show at all. How can I add it?

Answer 1

You need to bind to attr property as the data- specification depends specifically on HTML attributes rather than properties of DOM elements.

In your case you can have

<span *ngFor="let item of images">
    <img
        [src]="item.url"
        [alt.alt]="item.name"
        [attr.data-description]="item.description"
      />
</span>

Below is a sample output See this Demo