Cannot read property 'M_Sidenav' of null

I use Angular 6 and materializecss. I get this error:

ERROR TypeError: Cannot read property 'M_Sidenav' of null at HTMLBodyElement._handleTriggerClick (materialize.js:5632) at ZoneDelegate.push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invokeTask (zone.js:421) at Object.onInvokeTask (core.js:3811) at ZoneDelegate.push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invokeTask (zone.js:420) at Zone.push../node_modules/zone.js/dist/zone.js.Zone.runTask (zone.js:188) at ZoneTask.push../node_modules/zone.js/dist/zone.js.ZoneTask.invokeTask [as invoke] (zone.js:496) at invokeTask (zone.js:1540) at HTMLBodyElement.globalZoneAwareCallback (zone.js:1577)

html:

<nav class="indigo">
  <div class="nav-wrapper container">
    <a  (click)="open()" class="sidenav-trigger"><i class="material-icons">menu</i></a>
    <ul class="right hide-on-med-and-down">
      <li><a href="badges.html">Components</a></li>
      <li><a href="collapsible.html">Javascript</a></li>
      <li><a href="mobile.html">Mobile</a></li>
    </ul>
  </div>
</nav>


<ul class="sidenav" #sidenav>
  <li><a href="sass.html">Sass</a></li>
  <li><a href="badges.html">Components</a></li>
  <li><a href="collapsible.html">Javascript</a></li>
  <li><a href="mobile.html">Mobile</a></li>
</ul>

material.service:

import { ElementRef } from "@angular/core";

declare var M

export interface MaterialInstance {
    open?():void
    close?():void
    destroy?():void
}

export class MaterialService {

    static initSidenav(ref: ElementRef): MaterialInstance {
        return M.Sidenav.init(ref.nativeElement)
    }
}

component.ts:

  @ViewChild('sidenav') sidenav_Ref: ElementRef

  sidSub: Subscription
  sidenav: MaterialInstance

  ngAfterViewInit() {
    this.sidenav = MaterialService.initSidenav(this.sidenav_Ref)
  }

  ngOnDestroy() {
    if (this.sidSub) {
      this.sidSub.unsubscribe()
    }
    this.sidenav.destroy()
  }

  open() {
    this.sidenav.open()
  }

1 answer

  • answered 2018-11-08 07:54 Amir Fawzy

    i don't know where's exactly the issue here but i have some correction here.
    why you using declare var M since you didn't assign any value to it?
    why you using sidSub: Subscription and on destroy stage you unsbscribe since you didn't subscribe it at all?

    i don't use materialize css as framework much cases but it must be documentation of how to use it with such a framework like angular anyway if you one of the obsessed people fall in love with material design you can use Angular Material : is material design component for angular or ngx materialize : is a library of angular based on materilize css design spec... i hope that was helpful for you