Problem Situation
I am attempting to develop a customized typewriting effect similar to the one demonstrated here with a 100ms delay using Angular.
The TypeScript code I have written for this purpose is as follows:
private arr: string[] = ["Lead Developer (.NET)", "Full Stack (.NET) Developer", "Freelancer"];
private typewriter_text: string = "";
private typewriter_display: string = "";
ngOnInit() {
this.typingInitiating(this);
}
typingInitiating(that) {
this.arr.forEach(element => {
that.typewriter_text = element;
this.typingCallback(that);
});
}
typingCallback(that) {
if (this.typewriter_display.length < that.typewriter_text.length) {
this.typewriter_display += that.typewriter_text[this.typewriter_display.length];
setTimeout(that.typingCallback, 100, that);
}
else {
for (let i = that.typewriter_text.length; i >= 0; --i) {
this.typewriter_display = that.replaceAt(that.typewriter_text, i,that.typewriter_text.length - i);
console.log(this.typewriter_display)
}
}
}
replaceAt(text: string, index: number, charcount: number): string {
return text.substr(0, index) + text.substr(index + charcount);
}
In my App.Component.html:
{{typewriter_display }}
Live Stackblitz
An error message appears in the console:
https://i.sstatic.net/aEhB9.png
https://stackblitz.com/edit/angular-rqtvoz
I am curious about why my recursive function is not functioning as intended.