CODEWITHSUNDEEP
javascriptangularcallbackanime.js
Jainesh kumar
Jainesh kumar

Reputation: 93

Access Angular component property/ function inside callback functions of anime.js

I am new to Js and I am trying to create a simple app where I need to call an Angular component function after the animation completes. For animation, I am using anime.js and I am using Angular framework to create this app.

I have added the animation code inside the ngAfterViewInit function and I want to call showOptions() function of Angular component inside the complete callback of anime.js. But inside complete callback I am not able to access this component function. I tried to define the component object comp and then tried to use this object inside callback function to call the showOptions function but it's giving error

Cannot read property 'showOptions' of undefined

Also calling the showOptions function directly did not work.

My code:

ngAfterViewInit(): void {
    var textWrapper = document.querySelector('.an-2');
    textWrapper.innerHTML = textWrapper.textContent.replace(/\S/g, "<span class='letter'>$&</span>");
    anime.timeline({loop: false})
      .add({
        targets: '.an-2 .letter',
        opacity: [0,1],
        easing: "easeInOutQuad",
        duration: 2250,
        comp: this,
        delay: (el, i) => 150 * (i+1),
        complete: function (anim) {
          console.log('Completed' + anim);
          this.comp.showOptions();
        }
      });
  }

showOptions(){
   console.log('Show options called.');
}

Upvotes: 1

Views: 176

Answers (1)

Aakash Garg
Aakash Garg

Reputation: 10979

Change the normal callback to arrow function like below :-

ngAfterViewInit(): void {
    var textWrapper = document.querySelector('.an-2');
    textWrapper.innerHTML = textWrapper.textContent.replace(/\S/g, "<span class='letter'>$&</span>");
    anime.timeline({loop: false})
      .add({
        targets: '.an-2 .letter',
        opacity: [0,1],
        easing: "easeInOutQuad",
        duration: 2250,
        comp: this,
        delay: (el, i) => 150 * (i+1),
        complete:(anim) => {
          console.log('Completed' + anim);
          this.comp.showOptions();
        }
      });
  }

showOptions(){
   console.log('Show options called.');
}

Upvotes: 1

Related Questions