There seems to be an issue with the h2 interpolation not updating when the variable changes. My goal is to make it appear as though the word is being typed out by adding letters to the displayedWord variable. 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">Discover the magic of {{displayedWord}}_