Angular2 - MaterializeCSS: modal dialogs do not open

Question

I am using Angular2 with materializecss. At the moment, I'm trying to create modal dialogs that open when a button is clicked. There is also an example in the docs https://www.npmjs.com/package/angular2-materialize .

I also use materilize-select, which works fine, so I think installation, import, etc. true.

The problem is that when I click on the modal trigger, the router resolves to the new route "localhost: 4200 / # modal1" and I am redirected to my start page.

I also tried replacing href with data-target="modal1" , but that didn't work either.

Is there any way to disable Hash-Links for the router? My other routes without hashes.

Here is an 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 / tips appreciated!

Edit: I changed the anchor to call the function when clicked

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

which launches

 $('#modal1').openModal() 

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

Edit 2:

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

Answer 1

I have found a solution. It was rather unpleasant to get there, but here it is:

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

Then I followed the npmjs instruction and removed the part that imports the css stuff into app.module.ts.

 import "materialize-css"; 

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

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

Hope I can save other people from some of the frustrating hours that I had with this.

Answer 2

You can try to use open \ close programmatically:

• handle (click) = "openModal ()" on href.
• $ ('# modal1') openModal (); inside the openModal () function
• remove href = "# modal1"
• with closeModal () function with $ ('# modal1'). closeModal ();

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

You can also open modals programmatically, the code below will make your modal access to the finished document:

Answer 3

Only the same problem and the above solutions do not help me with this, so write a new answer

Just add $('.modal').modal(); into your component constructor.

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

Answer 4

Maybe I was late for this, but you added these two attributes to the modal trigger <a> , and not to the modal <div> .

I also made the same mistake as the OP, but after carefully reading the angular2-materialize page, I fixed my code as follows.

Instead of this

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

You must supply as:

 <!-- 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> 

Here you can specify three points:

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