Материализовать- css с angular

Question

Я пытаюсь использовать Angular 10 с Materialize css

Я вижу, что стили загружены правильно, но не могу получить JS события для открытия боковой панели для правильной работы.

Это то, что я делал до сих пор:

1. Я установил materialize-css используя npm
2. Добавлено "node_modules/materialize-css/dist/css/materialize.min.css", в styles и от "node_modules/materialize-css/dist/js/materialize.min.js" до scripts в angular.json
3. Мой app.component.ts выглядит так:

import { Component, ViewChild, ElementRef } from '@angular/core';
import * as M from "materialize-css/dist/js/materialize";

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})
export class AppComponent {
  title = 'mealer';

  @ViewChild('collapsible') collapsible: ElementRef;

  ngAfterViewInit() {

    let instanceCollapsible = new M.Collapsible(this.collapsible.nativeElement, {edge: 'left'});
    console.log(instanceCollapsible);

    console.log(this.collapsible.nativeElement);

  }
}

Мой app.component.html выглядит так

<nav>
  <div class="nav-wrapper">
    <a href="#" class="brand-logo center">Logo</a>
  </div>
</nav>

<ul id="collapsible" #collapsible class="sidenav">
  <li>
    <a href="#!">
      <i class="material-icons">cloud</i>First Link With Icon
    </a>
  </li>
  <li><a href="#!">Second Link</a></li>
  <li><div class="divider"></div></li>
  <li><a class="subheader">Subheader</a></li>
  <li><a class="waves-effect" href="#!">Third Link With Waves</a></li>
</ul>
<a href="#" class="sidenav-trigger" data-target="collapsible">
  <i class="material-icons">menu</i>
</a>

<router-outlet></router-outlet>

<footer>

</footer>

Не могу понять, почему не открывается меню сбоку. Когда я регистрирую instanceCollapsible, я вижу, что правильный элемент (UL) был зарегистрирован.

Answer 1

Я решил иначе. Я добавил JS файл для Materialize- css в папку src/assets/js/ и зарегистрировал этот файл в angular.json под scripts.

Затем в свой компонент я добавил инициализацию

ngOnInit(): void {
    var elems = document.querySelectorAll('.sidenav');
    var instances = M.Sidenav.init(elems, {edge: 'right'});
  }