adaptar codigo html a angular

<div id="div_palabra"></div>
<script>
let activo
dibujarPalabra('RAT')
capturaTeclado()
function dibujarPalabra(palabra) {
const div = document.getElementById('div_palabra')
for (let i = 0; i < palabra.length; i++) {
const btn = document.createElement('button')
btn.addEventListener('click', (e) => activo = e.target)
const txt = document.createTextNode('_')
btn.appendChild(txt)
div.appendChild(btn)
}
}
function capturaTeclado() {
document.addEventListener('keyup', (e) => {
if (activo && e.keyCode > 64 && e.keyCode < 90) {
activo.innerText = e.key
}
})
}
</script>

- Copiando y pegando el código en el src/index.html debería de funcionar correctamente XD. Pero si quieres integrarlo como un componente tienes que agregar uno como tal y/o editar uno ya existente.

- En otro Post leí que estabas mencionando algo de Routing, entonces supongo que quieres agregar un Componente para registrarlo en el Módulo routing.module.ts.

- Primero agrega el Componente que en mi caso llamaré juego,

Código

ng generate component juego

- Luego ve a tu Módulo routing.module.ts que en mi caso es app-routing.module.ts y agrega la ruta, que en mi caso terminaría todo así:

Código

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { JuegoComponent } from './juego/juego.component';
 
const routes: Routes = [
  {
    path: 'app-juego',
    component: JuegoComponent
  }
];
 
@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})
export class AppRoutingModule { }

- El juego.component.html terminaría así:

Código

<div id="div_palabra"></div>

- Y el juego.component.ts así:

Código

import { Component, OnInit } from '@angular/core';
 
@Component({
  selector: 'app-juego',
  templateUrl: './juego.component.html',
  styleUrls: ['./juego.component.css']
})
export class JuegoComponent implements OnInit {
 
  activo: any
 
  constructor() { }
 
  ngOnInit(): void {
    this.dibujarPalabra('RAT')
    this.capturaTeclado()
  }
 
  dibujarPalabra(palabra: string): void {
    const div = document.getElementById('div_palabra')
    for (let i = 0; i < palabra.length; i++) {
      const btn = document.createElement('button')
      btn.addEventListener('click', (e) => this.activo = e.target)
      const txt = document.createTextNode('_')
      btn.appendChild(txt)
      div.appendChild(btn)
    }
  }
 
  capturaTeclado(): void {
    document.addEventListener('keyup', (e) => {
      if (this.activo && e.keyCode > 64 && e.keyCode < 90) {
        this.activo.innerText = e.key
      }
    })
  }
 
}

- Para finalizar ejecutas lo siguiente:

Código

ng serve -o

-- Entonces agregas a la URL /app-juego y al final debería mostrar los botones y funcionar los eventos, en mi caso la URL sería: http://localhost:4200/app-juego

- Esa es una manera poco elaborada, luego se puede adaptar mejor para usar funcionalidades más puras de Angular, primero que funcione lo anterior y luego se corrige lo demás.