data binding in AOS - possible?

Question

I'm using Animate On Scroll in my angular poject, I have a bunch of images, that I want to reveal one after the other.

 <div class="img-gallery">
        <div *ngFor="let imgSrc of images" data-aos="zoom-in">
            <img [src]="imgSrc">
        </div>
    </div>

I wanted to add th each wrapper div the data-aos-delay directive, like this

<div *ngFor="let imgSrc of images; let i = index" data-aos="zoom-in" [data-aos-delay]="i * 100">
    <img [src]="imgSrc">
</div>

but, expectedly - it shows me the error

Can't bind to 'data-aos-delay' since it isn't a known property of 'div'

How can I implement it anyhow? any implementation will be accepted gratefully

Answer 1

Could you change it to below

You also have a typo on index

<div *ngFor="let imgSrc of images; let i = index" data-aos="zoom-in" data-aos-delay="{{i * 100}}">
    <img [src]="imgSrc">
</div>

You can also do like this

<div *ngFor="let imgSrc of images; let i = index" data-aos="zoom-in" [attr.data-aos-delay]="i * 100">
    <img [src]="imgSrc">
</div>