Cannot bind array data to Lightbox attribute

Question

gallery1.url binds to the href attribute perfectly but gallery1.ref_id does not bind data to the data-lightbox attribute, but if I use that same gallery1.ref_id inside of an HTML paragraph tag it shows data perfectly. what am I doing wrong?

<a
 href="{{ gallery1.url }}"
 data-lightbox="{{ gallery1.ref_id }}"
 data-title="Caption8"
>
  <img
     src="{{ gallery1.url }}"
     alt="image"
     style="width: 100%"
  />
</a>

Answer 1

As @MikeOne mentioned in the comment this method works perfectly.

[attr.data-lightbox]= "gallery1.ref_id"

Full example:

<a
 href="{{ gallery1.url }}"
 [attr.data-lightbox]= "gallery1.ref_id"
 data-title="Caption8"
>
  <img
     src="{{ gallery1.url }}"
     alt="image"
     style="width: 100%"
  />
</a>