Angular and lightgallery issue with src attribute

Question

I try to use lightGallery with an Angular 11+ application. The photo gallery works as expected when HTML content is created statically, i.e. data-src attribute of a tag inside lightGallery has static value:

<lightgallery [settings]="settings">
  <a data-lg-size="480-475-480, 800-791-800, 1406-1390" class="gallery-item"
    data-src="image1.jpg" data-responsive="image1-small.jpg" data-sub-html="Photo">
    <img class="img-responsive"
      src="image1-thumbnail.jpg" />
  </a>
</lightgallery>

However, following error message is displayed once data-src is set dynamically:

Can't bind to 'src' since it isn't a known property of 'a'.

Not working part:

<lightgallery [settings]="settings">
  <a *ngFor="let image of images" data-lg-size="480-475-480, 800-791-800, 1406-1390" class="gallery-item"
    data-src="{{image.src}}" data-responsive="{{image.responsive}}" data-sub-html="Photo">
    <img class="img-responsive"
      src="{{image.thumbnail}}" />
  </a>
</lightgallery>

Example is here on stackblitz.

What I do wrong here?

Answer 1

you should import LightgalleryModule in your component :

imports: [LightgalleryModule, CommonModule],