I have an array of words and my goal is to display each one of them in an HTML template every few seconds. The result should be something like this: https://bootstrapmade.com/demo/iPortfolio/
I know it is possible to do so by using the following JavaScript Code:
const typed = select('.typed')
if (typed) {
let typed_strings = typed.getAttribute('data-typed-items')
typed_strings = typed_strings.split(',')
new Typed('.typed', {
strings: typed_strings,
loop: true,
typeSpeed: 100,
backSpeed: 50,
backDelay: 2000
});
}
I tried to replicate the same effect using typescript and I wrote the following code instead:
export class HeroComponent implements OnInit {
words: string[] = ['marco', 'polo'];
word: string = "";
constructor() { }
ngOnInit(): void {
setTimeout(() => {
while(true){
for (let i=0; i < this.words.length; i++) {
setTimeout(() => {
this.word = this.words[i];
console.log(this.word)
}, 4000)
};
}}, 4000);
}
}
However once I run the website it says that it runs out of memory.
Would you be able to suggest a smart and elegant way to achieve the effect linked in the website above?
This would be the way to do it:
import { map, timer } from 'rxjs';
@Component({
...
})
export class HeroComponent {
words = ['marco', 'polo'];
word = timer(0, 4000).pipe(
map((num) => {
const index = num % this.words.length;
const word = this.words[index];
console.log(word);
return word;
})
);
}
Then use the async pipe in html:
<p>{{ word | async }}</p>
Example: https://stackblitz.com/edit/angular-ivy-7xbuft?file=src/app/app.component.ts
timer from RxJS emits integers in increasing order (0, 1, 2, 3, ...) starting at the first parameter (0ms) and then once every interval given by the second parameter (4000ms).
pipe lets us perform a series of actions on any emitted value before returning.
map takes the emitted value and returns a different value, in this case we use the integer to calculate the index of the array, then return the word at that index.
The async pipe will subscribe to the observable and unsubscribe when the component is destroyed, stopping the execution. Unsubscribing is important to prevent memory leaks.