Tallerlei Tallerlei - 1 month ago 146
Javascript Question

Angular2-Materialize: Modals don´t open

I´m using Angular2 with materializecss.
At the moment I´m trying to create modal dialogs which open on button click. There is also an example in the docs https://www.npmjs.com/package/angular2-materialize.

I also use a materilize-select which works perfectly fine, so I guess the installation, imports etc. are correct.

The problem is, when I click the modal-trigger the router resolves the new Route "localhost:4200/#modal1" and I´m redirected to my startpage.

I also tried to replace href with data-target="modal1" but that didn´t work either.

Can I somehow disable the Hash-Links for the Router? My other routes are without hashes.

Heres the example from npm docs. I copied this part 1:1.

<!-- Modal Trigger -->
<a materialize="leanModal" [materializeParams]="[{dismissible: false}]" class="waves-effect waves-light btn modal-trigger" href="#modal1">Modal</a>
<!-- Modal Structure -->
<div id="modal1" class="modal">
<div class="modal-content">
<h4>Modal Header</h4>
<p>A bunch of text</p>
</div>
<div class="modal-footer">
<a href="#!" class=" modal-action modal-close waves-effect waves-green btn-flat">Agree</a>
</div>
</div>


Any help/hints are appreciated!

Edit: I changed the anchor to call a function on click

<a materialize="leanModal" [materializeParams]="[{dismissible: false}]" class="waves-effect waves-light btn modal-trigger" (click)="openModal()>Modal</a>


which triggers

$('#modal1').openModal()


But now I get an error:
j.velocity is not a function

Edit 2:

Got it to open the modals by using jQuery instead of $. I still get the error and the Application is stuck after opening the modal.

Answer

I found a solution. Was quite frustrating to get there but here it is:

I reinstalled everything that was related to materialize + angular-cli, being angular2-materialize, materialize-css, jquery and hammerjs (which does not need to be installed manually).

Then I followed the instruction from npmjs and removed the part which imports material-css in app.module.ts.

import "materialize-css";

And after that everything works just fine. No need to alter the webpack settings in angular2-materialize package or anything like that. My versions are:

  • angular-cli 1.0.0-beta.16
  • angular2-materialize 5.2.1
  • materialize-css 0.97.7
  • jquery 2.2.4

I hope that I can save other people some frustrating hours I had with that.