As I experiment with my javascript/typescript code, I've encountered an issue where a string is displayed letter by letter perfectly fine. However, once the entire string is shown, the element containing it disappears and allows the bottom element to take its place. This doesn't look visually appealing to me. I want that space to always be reserved, whether it holds a string or not.
Feel free to test it out here: https://plnkr.co/edit/mbZDrlOSI1vnjIrSMcNq?p=preview
@Component({
selector: 'my-app',
template: `
<div>
<div #text1></div>
<div>Do you really think?</div>
</div>
`,
})
export class App {
@ViewChild('text1') text1:ElementRef;
ngAfterViewInit()
{
this.printLetterByLetter(this.text1, "Angular2 is awesome", 200)
}
printLetterByLetter(destination:ElementRef, message:string, speed:number){
let i = 0;
destination.nativeElement.innerHTML = "";
let interval = setInterval(()=>{
console.log(i);
destination.nativeElement.innerHTML += message.charAt(i);
i++;
if (i > message.length){
this.printLetterByLetter(this.text1, "Angular2 is awesome", 200)
clearInterval(interval);
}
}, speed);
}
}