Unable to use *ngFor on anchor tags within lightgallery component

[nishant]

Description

*ngFor is not working on a tags inside the lightgallery component. Error is as follows: NG8002: Can't bind to 'src' since it isn't a known property of 'a'.

Steps to reproduce

I have created a static object containing all data needed for the <a> tags:

const items = {
    image: 'https://imgur.com/5HVJtjC',
    thumbnail: 'https://dummyimage.com/squarepopup',
    title: 'Image 1',
    location: 'Somewhere, Someplace',
  }, {
    image: 'https://imgur.com/fG0GTFu',
    thumbnail: 'https://dummyimage.com/squarepopup',
    title: 'Image 2',
    location: 'Somewhere, Someplace',
  }, ...

Usage in app component html:

<lightgallery [settings]="settings" [onBeforeSlide]="onBeforeSlide">
  <a *ngFor="let item of items"
     class="gallery-item"
     data-src="{{ item.image }}"
     data-sub-html="{{ replacePlaceholderText(item.title, item.location) }}">
    <img class="img-responsive" src="{{ item.thumbnail }}" alt="Image Thumbnail">
  </a>
</lightgallery>

This results in a failed build with the following error message:

Failed to compile.

src/app/app.component.html:17:6 - error NG8002: Can't bind to 'src' since it isn't a known property of 'a'.

17      data-src="{{ item.image }}"
        ~~~~~~~~~~~~~~~~~~~~~~~~~~~

  src/app/app.component.ts:8:16
    8   templateUrl: './app.component.html',
                     ~~~~~~~~~~~~~~~~~~~~~~
    Error occurs in the template of component AppComponent.

Expected result

Under normal usage without the *ngFor, everything loads and renders fine:

<lightgallery [settings]="settings" [onBeforeSlide]="onBeforeSlide">
  <a class="gallery-item"
     data-src="some img url"
     data-sub-html="<h4>Photo by Someone</h4><p>Some Location</p>">
    <img class="img-responsive" src="some img url" />
  </a>
  <a class="gallery-item"
     data-src="some other img url"
     data-sub-html="<h4>Photo by Someone</h4><p>Some Location</p>">
    <img class="img-responsive" src="some other img url" />
  </a>
</lightgallery>

Any help resolving this issue would be appreciated as I have a large number of images to display and static html is much too lengthy.

[sachinchoolur]

You can use href

<a href="{{item.image}}"></a>

or

<a [attr.href]="item.image"></a>

<lightgallery [settings]="settings" [onBeforeSlide]="onBeforeSlide">
  <a *ngFor="let item of items" [attr.href]="item.image">
    <img className="img-responsive" src="{{ item. thumbnail }}" />
  </a>
</lightgallery>

Demo - https://stackblitz.com/edit/lightgallery-angular-update-slides?file=src%2Fapp%2Fapp.component.html

let me know if you have any questions

[nishant]

resolved with prefixing the existing attributes with attr. (no square brackets)

working with the following block:

<a *ngFor="let item of items"
     class="gallery-item"
     attr.data-src="{{ item.image }}"
     attr.data-sub-html="{{ replacePlaceholderText(item.title, item.location) }}">
    <img class="img-responsive" src="{{ item.thumbnail }}" alt="Image Thumbnail">
  </a>

marking this issue as closed. tysm for the quick response! really appreciate it👍

edit - went with this approach in the end:

<lightgallery [settings]="settings" [onBeforeSlide]="onBeforeSlide">
  <a *ngFor="let item of items" class="gallery-item"
     [attr.href]="item.image"
     [attr.data-sub-html]="replacePlaceholderText(item.title, item.location)">
    <img class="img-responsive" src="{{ item.thumbnail }}" alt="Image Thumbnail"/>
  </a>
</lightgallery>