ng4-sideNav-materialize.ts

//html

<ul id="sidenav" class="side-nav" materialize="sideNav" [materializeParams]="sidenavParams" [materializeActions]="sidenavActions" data-activates="sidenav">
    <li><div class="userView">
      <div class="background">
        <img src="images/office.jpg">
      </div>
      <a href="#!user"><img class="circle" src="images/yuna.jpg"></a>
      <a href="#!name"><span class="white-text name">John Doe</span></a>
      <a href="#!email"><span class="white-text email">jdandturk@gmail.com</span></a>
    </div></li>
    <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="#" data-activates="slide-out" class="button-collapse" (click)="showSidenav()"><i class="material-icons">menu</i></a>
  
  
  
  //component.ts
  import { Component, EventEmitter } from '@angular/core';
import {MaterializeAction} from 'angular2-materialize';


    sidenavActions = new EventEmitter<any>();
    sidenavParams = [];

    isActived = false;//for fix multiple init ;sidenav-overlay opacity 

    public showSidenav(): void {
        this.sidenavParams = ['show'];

        if (this.isActived == false){   
            //for avoid multiple initialization
            this.sidenavActions.emit('sideNav');
            this.isActived = true; 
        }