Estou tentando criar um efeito de "maquina de escrever" onde uma letra é inserida após a outra. O código está assim:
TypeScript:
TypeWriter() {
let element = <HTMLInputElement>document.getElementById("nome");
let frase = "Oi tudo bem?";
let soletra = frase.split('');
for(let i = 0; i < soletra.length; i++) {
setTimeout(() => element.innerHTML += soletra[i], 75 * i);
}
}
HTML:
<h3 id="nome"> Split: </h3>
O problema é que não está funcionando. A idéia é que cada letra da frase "Olá bom dia" seja inserida no html (element.innerHTML) a cada 75 milissegundos (a multiplicação serve pra que as letras nao sejam inseridas ao mesmo tempo, portanto a letra do vetor 1 será inserida 75 milissegundos + a posicao (75 + 1) depois da letra no vetor 0)
// ATUALIZAÇÃO - Versão sem o RxJS //
TypeScript:
export class Componente1Component implements OnInit {
frase = '';
ngOnInit() {
const soletra = 'Oi tudo bem?'.split('').reverse();
const soletrar = (a) => {
this.frase += a;
if (soletra.length > 0) {
setTimeout(() => soletrar(soletra.pop()), 75)
}
};
}
HTML: nao alterei
<h3 id="nome"> {{ frase }} </h3>
template string
, o que tbm não sei se garantirá que vai funcionar, pois, me parece que o código não está correto!