Interpolation and data-wow-delay attribute not working

MDB SupportCategory: MDB AngularInterpolation and data-wow-delay attribute not working
johndev Pro UserPremium asked 6 days ago in MDB pro, version:6.1.2

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

3 Answers
Damian Gemza answered 5 days 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 Pro UserPremium answered 4 days 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 3 days 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