How to change HTML via Typescript (Angular 2)?

Question

I am trying to create a "typewriter" effect where one letter is inserted after another. The code is like this:

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>

The problem is it’s not working. The idea is that each letter of the phrase "Hello good morning" is inserted into html (element.innerHTML) every 75 milliseconds (the multiplication serves to ensure that the letters are not inserted at the same time, so the letter of vector 1 will be inserted 75 milliseconds + the position (75 + 1) after the letter in vector 0)

// UPDATE - Version without 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: I have not changed

<h3 id="nome"> {{ frase }} </h3>

Answer 1

Weslipe, I made some adjustments using a bit of Rxjs. See below the code:

Template

<div>{{frase}}</div>

Class

import { Component, OnInit } from '@angular/core';
import { from, of } from 'rxjs';
import { delay, concatMap } from 'rxjs/operators';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent implements OnInit {
  frase = '';
  ngOnInit() {
     const soletra = 'Oi tudo bem?'.split('');
     from(soletra)
      .pipe(
        concatMap(x => of(x).pipe(delay(75)))
      )
      .subscribe(a => {
       this.frase += a;
      });
   }
}