Interpolation and data-wow-delay attribute not working

johndev asked 4 months ago

Hello,

I am wanting to assign a property value to the data-wow-delay attribute when using the wow animations and for some reason it does not work.

data-wow-delay="{{delay[0]}}"

I can assign this property value to any other attribute and it works fine. This is very basic, so I'm really confused as to why this is not working.

The wow animations work fine within my project, so I know that it is all configured correctly. The end goal is to use an *ngFor as shown below on a <div> and animate a string of text letter by letter, so I'd change the zero (below) to an i when referencing the "delay" array below.

<div class="container">
 <div class="row text-center text-uppercase pt-5">
  <div class="col-12">
   <div *ngFor="let titles of title; let i = index" class="h1 d-inline wow zoomIn"data-wow-delay="{{delay[0]}}">{{title[i]}}
   </div>
  </div>
 </div>
</div>

The component.ts related to this component has the following property...

delay: string[] = ['0.7s', '1.7s', '2.7s'];

Nothing complicated here at all yet {{delay[0]}} renders nothing when assigned to data-wow-delay, yet it returns '0.7s' when assigned to any other attribute for testing purposes.

I hope that makes sense and someone can clear this up for me.
Thank you,
John


Damian Gemza answered 4 months ago

Dear johndev,
There's some problems with interpolating string into custom attribute in Angular. That's not problem only with data-wow, but with every attributes.
Instead of data-wow-delay={{delay}}, please use this convention:

.html:

[attr.data-error]="delay"

.ts:

delay: string = '3.0s';

For me it's working fine.

Here you can read more about this problem: https://stackoverflow.com/questions/49098630/angular-string-interpolation-within-a-style-property-not-working

Best Regards,

Damian


johndev answered 4 months ago

Hello Damian, thanks for your answer, but I should have mentioned that I tried it via property binding as well (like you mentioned) and it's still not working. If it is working for you with the data-wow-delay attribute can you share your code? Maybe I'm missing something silly.

HTML

<div class="h1 wow zoomIn" [data-wow-delay]="delay">Testing</div>

TS

delay: string = "2.7s";

Note that the zoomIn animation still works in the above example, it just doesn't render the "data-wow-delay" attribute to the DOM at all, so the zoomIn effect happens immediately upon page load.

Thank you for your help,

John

 


Damian Gemza answered 4 months ago

Dear johndev,
The key to success in your case is to use

[attr.data-wow-delay]

instead of traditional binding

[data-wow-delay].

So this code will work:

<div class="h1 wow zoomIn" [attr.data-wow-delay]="delay">Testing</div>

And this code won't work to you:

<div class="h1 wow zoomIn" [data-wow-delay]="delay">Testing</div>

And delay is:

delay: string = "2.7s";

Does everything is clear to you now?

Best Regards,

Damian


rajeshweb answered 5 days ago

data-wow-delay=".2s"

how to change the value with ngFor loop (increment +2)

 

 


Dear Rajesh,

Just use the code from my above example. Use [attr.data-wow-delay]="delay", and in loop try to increment delay variable value.

Best Regards,

Damian


Please insert min. 20 characters.
Status

Answered

Specification of the issue
  • User: Pro
  • Premium support: No
  • Technology: Angular
  • MDB Version: -
  • Device: -
  • Browser: -
  • OS: -
  • Provided sample code: Yes
  • Provided link: No