Angular 2+ Materialize jquery

Question

I am trying out Materialize in an Angular 4 project and it's all installed and working.

My problem comes with I try the script section.

For example:

I add this to my component.html:

<!-- Modal Trigger -->
  <a 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>

And then the instructions tell me to initialize it using jquery so I'm added this to my index.html:

<script>
  $(document).ready(function(){
    $('.modal1').modal();
  });
</script>

The problem I cannot see any modal appearing.

How can I get this to work on Angular 4?

score 0 · Accepted Answer · answered Aug 26 '17 at 09:11

0

Try the following:

<script>
  $(document).ready(function(){
     $('.modal-trigger').leanModal();
  });
</script>

plunker

answered Aug 26 '17 at 09:11

Vega

27,856
27
95
103

Im getting this error: Uncaught ReferenceError: $ is not defined at localhost/:18 – Aug 26 '17 at 09:19
Were you getting the same message before, with the previous code? – Vega Aug 26 '17 at 09:20
1

Do you this in index.html? – Vega Aug 26 '17 at 10:00
Yeah that stopped the error and the modal now works. I installed jquery via npm and added this to the angular-cli.json "../node_modules/jquery/dist/jquery.js", ...does this mean I can only use jquery on my index.html and only include jquery on my index.html? – Aug 26 '17 at 10:03
1

Well, this is one of the ways, https://stackoverflow.com/questions/30623825/how-to-use-jquery-with-angular – Vega Aug 26 '17 at 10:37
I've just kept the cdn on my index.html – Aug 26 '17 at 13:33
No, I can only get it all working when I add the jquery cdn and code on my index.html – Aug 26 '17 at 19:35
I thought that what you wanted, as it stated in your question. What you want to do then? – Vega Aug 26 '17 at 19:36
Your question is with jquery, it leads to think you are using jquery and just want to resolve an issue with the code – Vega Aug 26 '17 at 19:37
What I've done is an empty project using Angular-cli...then added Materialize following the cli instructions here: https://www.npmjs.com/package/angular2-materialize ... I then have issues with jQuery so I added: npm install @types/jquery --save-dev but I still can only use materialize modals if I add jquery to index.html ... so unless I do this on a clean new project it won't work – Aug 26 '17 at 19:50
Materilize is using jquery, so you need that libraries in order to make it work. They clearly state that on their docs. if you don't want to use jquery libraries then you should use some other packages, like ng-materilize or angular material if you wish to use a modal window component or make one by yourself in angular :) – Vega Aug 26 '17 at 19:53

Angular 2+ Materialize jquery

1 Answers1