0

the h2 interpolation does not get updated when the variable changes what I'm trying to do is to add letters to displayedWord variable To appear as if the word gets typed TS

  displayedWord = ''
  words = ['Innovation', 'Inspiration']


  changeWord = (words) => {

    const wordArray = this.words[0].split('')
    const lettersToDisplay = []

    for (let i = 0; i < wordArray.length; i++) {
      setTimeout(function () {
        const letter = wordArray[i];
        lettersToDisplay.push(letter)
        this.displayedWord = lettersToDisplay.join('');
        console.log(this.displayedWord);
      }, 1000 * i);
    }
  }


  ngOnInit(): void {
    this.changeWord(this.words);
  }

HTML

        <h2 class="about__title">We help you discover the power of {{displayedWord}}_
Khaled Mahmoud
  • 35
  • 6

1 Answers1

1

You've got to change :

setTimeout(function() { ... } )

To:

setTimeout(() => {...})

In order this to be referencing the component instance.

Take a look here.

States that:

Does not have its own bindings to this.

compared to function expression

korteee
  • 2,640
  • 2
  • 18
  • 24