Geek Answers Handbook

Angular2 and material integration

I am using angular2 to create a web application that uses HashLocationStrategy. everything is fine until I try to add jquery materializecss based components to my templates.

for example, here is an example of a navigation bar change button

<a href="#" data-activates="nav-mobile" class="button-collapse"> <i class="material-icons">menu</i> </a>

angular will consider this as a route path and will move around the main page

Are there any work rounds for this problem?

+5
source share
1 answer

As you said it yourself: materializecss is jquery-based, that is, jQuery needs to activate dynamic behavior. In your case, you need to add $(".button-collapse").sideNav(); somewhere on the page $( document ).ready(function(){}) .

Take a look at https://www.npmjs.com/package/angular2-materialize . This lib adds exactly this dynamic behavior to angular2. After importing "MaterializeDirective" into your angular2 component, you can simply add materialize="sideNav" to your anchor tag and it should work:

 <a href="#" materialize="sideNav" data-activates="nav-mobile" class="button-collapse"> <i class="material-icons">menu</i> </a>
+7
source

More articles:


All Articles