An Infinite Type and Delete Animation in Angular 10
By: Liraz Shaka Amir
Tags: Angular, Text Animations, Npm Package, Components, Type Delete

Let’s get to business. this is the “Hard Part”. our ts file:

First, imports:

imports — type-delete.component.ts



AfterViewInit, Component, ElementRef, Input, Renderer2, ViewChild

} from " import {AfterViewInit, Component, ElementRef, Input, Renderer2, ViewChild} from " @angular/core ";

class declaration and variables — type-delete.component.ts





export class TypeDeleteComponent implements AfterViewInit { @ViewChild ("textElement") textElement: ElementRef; @ViewChild ("blinkElement") blinkElement: ElementRef;

"You Can...",

"Write Anything You want...",

"SBZ 🍻 Enjoy 🍸🍻🍺🍷🍹"

];









@Input () wordArray: string[] = ["You Can...","Write Anything You want...","SBZ 🍻 Enjoy 🍸🍻🍺🍷🍹"]; @Input () textColor = "black"; @Input () fontSize = "20px"; @Input () blinkWidth = "2px"; @Input () typingSpeedMilliseconds = 300; @Input () deleteSpeedMilliseconds = 300; private i = 0; constructor(private renderer: Renderer2) {} ngAfterViewInit(): void {

this.initVariables();

this.typingEffect();

}

First, we define our element references from the HTML file. then we define the inputs we want to receive in order to control the CSS properties. let’s go through them:

wordArray — the string array for the words we want to display on the screen.

fontSize — the font size for the text and the blinking cursor.

blinkWidth — the width of the blinking cursor.

typingSpeedMilliseconds — the speed of the text typing in milliseconds.

deleteSpeedMilliseconds — the speed of deleting the text in milliseconds.

private i — variable for counting which string we’re at inside the string array.

Notice that we gave everything a default value in case no input is entered.

variable initialization function — type-delete.component.ts

private initVariables(): void {

this.renderer.setStyle(

this.textElement.nativeElement,

"color",

this.textColor

);

this.renderer.setStyle(

this.textElement.nativeElement,

"font-size",

this.fontSize

);

this.renderer.setStyle(this.textElement.nativeElement, "padding", "0.1em"); this.renderer.setStyle(

this.blinkElement.nativeElement,

"border-right-width",

this.blinkWidth

);

this.renderer.setStyle(

this.blinkElement.nativeElement,

"border-right-color",

this.textColor

);

this.renderer.setStyle(

this.blinkElement.nativeElement,

"font-size",

this.fontSize

);

}

initVariables() — in this function we initialize all of the CSS properties of our span elements by using the angular Rendererr2 engine. we set either the default values we’ve set or if the user has set.

typingEffect() — type-delete.component.ts

private typingEffect(): void {

const word = this.wordArray[this.i].split("");

const loopTyping = () => {

if (word.length > 0) {

this.textElement.nativeElement.innerHTML += word.shift();

} else {

this.deletingEffect();

return;

}

setTimeout(loopTyping, this.typingSpeedMilliseconds);

};

loopTyping();

}

This is where the magic for typing happens. let’s got through every line so you will understand what’s going on:

const word = this.wordArray[this.i].split("");

we split our words array to get only the string in the i (0 in the beginning) position. by using split(“”) we get a char array of that string.

֫const loopTyping = () => {

if (word.length > 0) {

this.textElement.nativeElement.innerHTML += word.shift();

} else {

this.deletingEffect();

return;

}

setTimeout(loopTyping, this.typingSpeedMilliseconds);

};

here we declare a variable — loopTyping, which is an inner function basically, that checks if we are not at the end of the string.

if we are not at the of that string we add to our text element a single letter using the shift() method. this method removes the first element from an array and returns that removed element. This method changes the length of the array.

let’s say for example that the string is “Hello”. the shift() method returns the “H” and removes it from the string which now contains “ello”.

after that, we call the variable loopTyping (it’s a function remember?) using the setTimeout method with the delay we either set as default (300) or what the user has entered, giving the illusion we are writing the text on the screen.

if we are at the end of that string, we call the deletingEffect() function and return to close the function.

loopTyping();

after that, we call the loopTyping variable we declared (it’s a function remember?) to actually start the typing.

deleting function — type-delete.component.ts

private deletingEffect(): void {

const word = this.wordArray[this.i].split("");

const loopDeleting = () => {

if (word.length > 0) {

word.pop();

this.textElement.nativeElement.innerHTML = word.join("");

} else {

this.i = this.wordArray.length > this.i + 1 ? this.i++ : 0; this.typingEffect();

return false;

}

setTimeout(loopDeleting, this.deleteSpeedMilliseconds);

};

loopDeleting();

}

This is where the magic for the deleting happens. let’s got through every line so you will understand what’s going on:

const word = this.wordArray[this.i].split("");

we split our words array to get only the string in the i (0 in the beginning) position. by using split(“”) we get a char array of that string.

const loopDeleting = () => {

if (word.length > 0) {

word.pop();

this.textElement.nativeElement.innerHTML = word.join("");

} else {

this.i = this.wordArray.length > this.i + 1 ? this.i++ : 0; this.typingEffect();

return false;

}

setTimeout(loopDeleting, this.deleteSpeedMilliseconds);

};

again declaring an inner function — loopDeleting. also checking if not at the end of the string.

if we are not at the of that string we use the pop() method — this method removes the last element from an array and returns that element. This method changes the length of the array.

let’s say for example that the string is “Hello”. the pop() method removes the “o” from the string which now contains “Hell”.

then we set the text inside the element using the join() method — this method creates and returns a new string by concatenating all of the elements in an array.

after that, we call the variable loopDeleting (it’s a function remember?) using the setTimeout method with the delay we either set as default (300) or what the user has entered, giving the illusion we are deleting the text on the screen.

if we are at the end of that string, we need to take care of the i variable. if we are at the end of the word array we reset it to 0, if not we simply increase the i by 1 so we can get the next string in the words array. after that, we call the typingEffect() function so we can type the next string on the screen.

loopDeleting();

after that, we call the loopDeleting variable we declared (it’s a function remember?) to actually start deleting the text.