I am using angular2 to build a web app which uses HashLocationStrategy. everything is fine until I try to add materializecss jquery-based ponents 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?

I am using angular2 to build a web app which uses HashLocationStrategy. everything is fine until I try to add materializecss jquery-based ponents 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?

• javascript
• angular
• materialize

Share Improve this question Follow asked Apr 29, 2016 at 17:54 alobaaloba 5111 silver badge33 bronze badges 2

• 1 Maybe just remove the href="#"? – André Kool Commented Apr 29, 2016 at 18:02
• the button is not working when i remove href="#" and i don't know why? – aloba Commented Apr 30, 2016 at 9:27

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 7

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./package/angular2-materialize. This lib adds exactly this dynamic behaviour to angular2. After importing 'MaterializeDirective' in your angular2 ponent, 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>