使用 angular 实现 css

Question

I am trying to use Angular 10 with Materializecss

I can see that the styles is loaded correctly, but I am not able to get the JS events for opening sidebar to work properly.

This is what I did so far:

1. I have installed materialize-css using npm
2. Added "node_modules/materialize-css/dist/css/materialize.min.css", in styles and "node_modules/materialize-css/dist/js/materialize.min.js" to scripts in angular.json
3. My app.component.ts looks like this:

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);

  }
}

4. My app.component.html looks like this

<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>

I can't figure out why it doesn't open the menu from the side. When I log instanceCollapsible , I can see that the correct element (UL) has been logged.

Answer 1

I have solved it the other way. I added JS file for Materialize-css in src/assets/js/ folder and registered that file in angular.json under scripts .

Then in my component I added the initialization

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