Materialize-CSS burger menu doesn't trigger sidenav in Angular project

I'm trying to implement a burger menu triggering a side bar when on mobile in my Angular project. However, despite being displayed the menu icon doesn't trigger the side bar when I click on it. The side bar is well instanced but doesn't translate on screen when I click on the burger menu icon. I followed the instructions given by the Materialize-Css website>

Here is my code:

HTML:

  <nav>

    <div class="nav-wrapper">
      <a href="#" data-target="mobile-demo" class="sidenav-trigger"><i class="material-icons">menu</i></a>

      <ul id="nav-mobile" class="hide-on-med-and-down">
        <li class="center-align social"><a href="https://www.instagram.com/prunieres_hotel_restaurant/"><i class="fa-brands fa-instagram fa-xl"></i></a></li>
        <li class="center-align"><a routerLink="">Accueil</a></li>
        <li class="center-align"><a routerLink="/hotel">Hôtel</a></li>
        <li class="center-align"><a routerLink="/restaurant">Restaurant</a></li>
        <li class="center-align"><a routerLink="/histoire"> Histoire</a></li>
        <li class="center-align"><a routerLink="/region">La Région</a></li>
        <li class="center-align"><a routerLink="/contact">Contact</a></li>
        <li class="center-align social"><a><i class="fa-brands fa-instagram invisible fa-xl"></i></a></li>
      </ul>

    </div>

  </nav>

  <ul class="sidenav" id="mobile-demo">
    <li class="social"><a href="https://www.instagram.com/prunieres_hotel_restaurant/"><i class="fa-brands fa-instagram fa-xl"></i></a></li>
    <li><a routerLink="">Accueil</a></li>
    <li><a routerLink="/hotel">Hôtel</a></li>
    <li><a routerLink="/restaurant">Restaurant</a></li>
    <li><a routerLink="/histoire"> Histoire</a></li>
    <li><a routerLink="/region">La Région</a></li>
    <li><a routerLink="/contact">Contact</a></li>
  </ul>

Javascript:

import { Component, OnInit } from '@angular/core';

declare const M: any;

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrl: './app.component.scss'
})

export class AppComponent implements OnInit{

  ngOnInit() {
    document.addEventListener('DOMContentLoaded', function() {
      var elems = document.querySelectorAll('.sidenav');
      var instances = M.Sidenav.init(elems, {});
    });
  }
}

I checked my installation of materialise and it doesn't seems to be the problem, I don't get any error from javascript but the

var instances = M.Sidenav.init(elems, {});

tell me that 'instances' is declared but never used.