angular2 and materializecss integration

Question

I am using angular2 to build a web app which uses HashLocationStrategy. everything is fine until I try to add materializecss jquery-based components to my templates.

for example here is a sample of navbar collapse button

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

angular will treat this as a route path and will navigate to the main page

is there any work-rounds for this problem?

Answer 1

As you said it yourself: materializecss is jquery-based, i.e. it needs jquery to activate the dynamic behaviour. In your case, you'd have to add $(".button-collapse").sideNav(); somewhere in your page's $( document ).ready(function(){}) code.

Take a look at https://www.npmjs.com/package/angular2-materialize. This lib adds exactly this dynamic behaviour to angular2. After importing 'MaterializeDirective' in 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>