innerHTML doesn't work well (angular - typescript,html)

I try to make innerHTML from ts file and it doesn't work well, the idea is to make card__timer work when there is a click on the button .

the card_timer class is SVG timer.

ts file:

document.querySelector(".card__timer")!.innerHTML = `
<div class="base-timer">
  <svg class="base-timer__svg" viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
    <g class="base-timer__circle">
      <circle class="base-timer__path-elapsed" cx="50" cy="50" r="45"></circle>
      <path
        id="base-timer-path-remaining"
        stroke-dasharray="283"
        class="base-timer__path-remaining ${remainingPathColor}"
        d="
          M 50, 50
          m -45, 0
          a 45,45 0 1,0 90,0
          a 45,45 0 1,0 -90,0
        "
      ></path>
    </g>
  </svg>
  <div id="base-timer-label" class="base-timer__label">
    <span>${formatTime(timeLeft)}</span>
    <span>${formatTime(timeLeft)}</span>
    </div>
</div>`;


document.querySelectorAll<HTMLElement>(".card_button").forEach(function (item) {
  item.addEventListener("click", function (e) {
    e.preventDefault();
    (document.querySelector(".card__timer") as HTMLElement).style.display = 'block';
    document
      .querySelectorAll<HTMLElement>(".card__block:not(.card__timer)")
      .forEach(function (el ) {
        el.style.display= "none"
      });
     (".card__block:not(.card__timer)"))

      startTimer()
  })
})