CODEWITHSUNDEEP
javascriptangularmodal-dialogroutermaterialize
Tallerlei
Tallerlei

Reputation: 219

Angular2 - MaterializeCSS: Modal dialogs 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.

Upvotes: 7

Views: 6588

Answers (4)

Chandan Kumar
Chandan Kumar

Reputation: 11

I might be late for this, but you put those two attributes in modal trigger <a> rather than the modal <div> itself.

I also did exactly same mistake as OP, but after reading the angular2-materialize page carefully, I corrected my code as mentioned below.

Instead of this

<!-- Modal Trigger -->
<a materialize="leanModal" [materializeParams]="[{dismissible: false}]" class="waves-effect waves-light btn modal-trigger" href="#modal1">Modal</a>

You have to put like:

<!-- Modal Trigger -->
<a class="waves-effect waves-light btn modal-trigger" href="#modal1">Modal</a>

<!-- Modal Structure -->
<div id="modal1" class="modal" materialize="leanModal" [materializeParams]="[{dismissible: false}]"> 
... 
</div>

Three points to note here:

  • there are no special attributes in <a> i.e. the trigger
  • in place of materialize="leanModal", it is materialize="modal" in modal
  • didn't need to remove import "materialize-css"; in my case

Upvotes: 1

GrvTyagi
GrvTyagi

Reputation: 4487

Face same problem and above solutions not help me on this, so write a new answer

Just add $('.modal').modal(); in your components constructor.

import ... './stuff'
declare var $: any
@Component{...}
export class EditBlogComponent ...{
   constructor(){
   //Initialize modal here solve my 
   $('.modal').modal();

   }
}

Upvotes: 0

Tallerlei
Tallerlei

Reputation: 219

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.

Upvotes: 7

dokkis
dokkis

Reputation: 366

You can try to use open\close programmatically by:

  1. handle (click)="openModal()" on the href
  2. $('#modal1').openModal(); inside the openModal() function
  3. remove the href="#modal1"
  4. having a closeModal() function with $('#modal1').closeModal();

see http://materializecss.com/modals.html when the doc says:

You can also open modals programatically, the below code will make your modal open on document ready:

Upvotes: 0

Related Questions