Interpolation and data-wow-delay attribute not working

Topic: Interpolation and data-wow-delay attribute not working

johndev pro asked 7 years 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

Add comment

Damian Gemza staff answered 7 years ago

0 0 Best answer

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

Add comment

johndev pro answered 7 years ago

0 0 Best answer

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>

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

Add comment

Damian Gemza staff answered 7 years ago

0 0 Best answer

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

Add comment

rajeshweb answered 6 years ago

0 0 Best answer

data-wow-delay=".2s" how to change the value with ngFor loop (increment +2)

Add comment

Damian Gemza staff answered 6 years ago

0 0 Best answer

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

Add comment

Write

Create snippet

FREE CONSULTATION

Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.

Status

Answered

Specification of the issue

User: Pro
Premium support: No
Technology: MDB Angular
MDB Version: -
Device: -
Browser: -
OS: -
Provided sample code: Yes
Provided link: No

About author

johndev

Pro User

10Support score
3Questions 2Answers

0Snippets likes 0Snippets