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

npm install materialize-css@next --save

so this installed

"materialize-css": "^1.0.0-alpha.2",

Then in the angular-cli.json I have added reference to css and js file

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

Now this is working fine for normal components like button and navigation bar as these components do not need any js.

How can I create dynamic elements like the carousel, collapsible and other components in which there is the requirement for js?

As I have googled there are wrapper libraries like angualr2-materialize

So I have installed this

npm install angular2-materialize --save

And imported the module in my app.module.ts

import { MaterializeModule } from 'angular2-materialize';

and then in imports array of @NgModule

imports: [
  BrowserModule,
  MaterializeModule
],

and when I use the following markup

<a class="waves-effect waves-light btn modal-trigger" (click)="openModal()">Modal</a>

<div id="modal1" class="modal bottom-sheet" materialize="modal" [materializeParams]="[{dismissible: false}]" [materializeActions]="modalActions">
    <div class="modal-content">
        <h4>Modal Header</h4>
        <p>A bunch of text</p>
    </div>
    <div class="modal-footer">
        <a class="waves-effect waves-green btn-flat" (click)="closeModal()">Close</a>
        <a class="modal-action modal-close waves-effect waves-green btn-flat">Agree</a>
    </div>
</div>

It is showing

index.js:4 Uncaught Error: Couldn't find Materialize object on window. It is created by the materialize-css library. Please import materialize-css before importing angular2-materialize.
    at Object.../../../../angular2-materialize/dist/index.js (index.js:4)
    at __webpack_require__ (bootstrap f20633ecefcae2ee4f21:54)
    at Object.../../../../../src/app/app.module.ts (app.component.ts:9)
    at __webpack_require__ (bootstrap f20633ecefcae2ee4f21:54)
    at Object.../../../../../src/main.ts (environment.ts:8)
    at __webpack_require__ (bootstrap f20633ecefcae2ee4f21:54)
    at Object.3 (main.ts:11)
    at __webpack_require__ (bootstrap f20633ecefcae2ee4f21:54)
    at webpackJsonpCallback (bootstrap f20633ecefcae2ee4f21:25)
    at main.bundle.js:1

Am I missing something?

Is there any way to use MaterializeCSS library without using wrappers?

Code Guru · Accepted Answer · 2019-09-28 09:12:23Z

13

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.

edited Sep 28, 2019 at 9:12

answered Jan 2, 2018 at 10:04

Code Guru

15.8k31 gold badges147 silver badges214 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

Abdul Rehman Khan Over a year ago

i am stucked at the step 2, 3 and 4 Please guide me how to implement materialize.css.

Robert Leeuwerink Over a year ago

To suppress the error in the console please add {read: ElementRef} @ViewChild('collapsible', { read: ElementRef }) elCollapsible: ElementRef;

Robert Leeuwerink Over a year ago

And for using @ViewChilderen Step 4 elems['_results'].forEach(el => console.log(el.nativeElement))

Robert Leeuwerink Over a year ago

@AbdulRehmanKhan make sure to find the location of your node_modules

Robert Leeuwerink Over a year ago

Please add a Step 5) do not forget #collapsible on your <ul #collapsible>

|

mico.barac · Accepted Answer · 2019-04-15 11:14:43Z

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('');
  }
}

user753676 · Accepted Answer · 2017-12-28 12:42:59Z

0

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

answered Dec 28, 2017 at 12:42

user753676

6 Comments

Code Guru Over a year ago

Then i need to switch to 0.x? What if I want to use the 1.X?

Code Guru Over a year ago

is there any way I can use it without wrapper libraries?

user753676 Over a year ago

Sure, but then you can not use the wrapper libraries if they do not yet support 1.x.

user753676 Over a year ago

In this case I suggest asking at the wrapper libraries' repositories if there is support for Materialize 1.x or if there are workarounds to mix the old Materialize version with the new version.

Code Guru Over a year ago

If I want to use it directely without using any wrapper class?

|

Collectives™ on Stack Overflow

How to use materialize-css with angular

3 Answers 3

6 Comments

Comments

6 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

6 Comments

Comments

6 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related