Código JS Vanilla no Angular

Eu tentei aplicar, apenas para praticar mesmo, um código JS puro no angular. E eu emperrei logo no começo com algo que me parece muito simples :(

O código que eu estou tentando replicar é um simples collapse em um botão no html

HTML

<ul class="snav-menu p-0">
  <li class="snav-titulo">
    <button type="button" class="snav-collapse">Front-end</button>
  </li>
  <div class="content">
    <div class="snav-item">Javascript</div>
    <div class="snav-item">Typescript</div>
  </div>
</ul>

Javascript Puro

<script>
var coll = document.getElementsByClassName("snav-collapse");
var i;

for (i = 0; i < coll.length; i++) {
  coll[i].addEventListener("click", function() {
    this.classList.toggle("active");
    var content = this.nextElementSibling;
    if (content.style.display === "block") {
      content.style.display = "none";
    } else {
      content.style.display = "block";
    }
  });
}
</script>

No typescript do Angular eu coloquei a mesma coisa, dentro do ngOnInit, porém ele dá um erro no this do classList e no this.nextElementSibling. Para continuar usando js puro, o que eu deveria fazer e porque está errado assim?

export class SidenavComponent implements OnInit {
  constructor() {}

  ngOnInit() {
    let coll = document.getElementsByClassName('snav-collapse');
    let i;

    for (i = 0; i < coll.length; i++) {
      coll[i].addEventListener('click', function () {
        this.classList.toggle('active');
        var content = this.nextElementSibling;
        if (content.style.display === 'block') {
          content.style.display = 'none';
        } else {
          content.style.display = 'block';
        }
      });
    }
  }
}