How to use materialize-css with angular

Question

I have created an angular4 project with angular-cli. I want to materialize-css@next library. So I have installed it using

np         


        

Answer 1

1) Install Materialize:

yarn add material-design-icons-iconfont
yarn add materialize-css
yarn add -D @types/materialize-css

2) Import Materialize styles:

@import '~material-design-icons-iconfont/dist/material-design-icons.css';
@import '~materialize-css/sass/materialize';

3) Create HTML for the component:

<div class="container">
  <ul id="dropdown" class="dropdown-content">
    <li><a href="#!" (click)="logout()">Logout</a></li>
  </ul>
  <nav>
    <div class="nav-wrapper">
      <a href="#" class="brand-logo">Akita</a>
      <ul id="nav-mobile" class="right hide-on-med-and-down">
        <li><a routerLink="dashboard" *showIfLoggedIn="true">Dashboard</a></li>
        <li><a routerLink="todos" *showIfLoggedIn="true">Todos</a></li>
        <li *showIfLogin="false"><a *showIfLoggedIn="false" routerLink="login"
            class="waves-effect waves-light btn">Login</a></li>
        <li><a class="dropdown-trigger" href="#!" data-target="dropdown" #dropdown>Welcome, {{ name$ | async}}!<i
              class="material-icons right">arrow_drop_down</i></a></li>
      </ul>
    </div>
  </nav>
</div>

4) Import Materialize and bind the dropdown:

import { AfterViewInit, Component, ElementRef, OnInit, ViewChild } from '@angular/core';
import { Router } from '@angular/router';
import * as M from 'materialize-css';
import { Observable } from 'rxjs';
import { AuthQuery, AuthService } from '../auth/state';

@Component({
  selector: 'app-main-nav',
  templateUrl: './main-nav.component.html',
  styleUrls: ['./main-nav.component.scss']
})
export class MainNavComponent implements OnInit, AfterViewInit {
  name$: Observable<string>;

  @ViewChild('dropdown') dropdown: ElementRef;

  constructor(private router: Router, private authService: AuthService, private authQuery: AuthQuery) {}

  ngOnInit() {
    this.name$ = this.authQuery.name$;
  }

  ngAfterViewInit() {
    new M.Dropdown(this.dropdown.nativeElement, {});
  }

  logout() {
    this.authService.logout();
    this.router.navigateByUrl('');
  }
}

Answer 2

angular2-materialize probably uses Materialize 0.x which uses the Materialize namespace. materialize-next switchted to the M namespace.

angular2-materialize should already include Materialize (0.x).

Answer 3

angular2-materialize is based on materialize-css 0.X. As materialize-css 1.X has not dependency on jQuery. Even I did not found any wrapper over this and I don't want to use the wrapper modules. So I have solved this problem by following these steps.

1) JS and CSS Reference in angular-cli.json

"styles": [
   "styles.css",
   "../node_modules/materialize-css/dist/css/materialize.css"
],
"scripts": [
  "../node_modules/hammerjs/hammer.js",
  "../node_modules/materialize-css/dist/js/materialize.js"
]

hammerjs is required for some components to listen sliding events.

2) Import in ts

import * as M from "materialize-css/dist/js/materialize";

3) Get the element Reference

@ViewChild('collapsible') elCollapsible: ElementRef;

4) Wrap the element

ngAfterViewInit() {
    let instanceCollapsible = new M.Collapsible(this.elCollapsible.nativeElement, {});
}

5) Do not forget #collapsible on your <ul #collapsible>

And done.