Search code examples
javascriptangularmaterialize

Angular 2+ Materialize jquery

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?

Solution

  • Try the following:

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

    plunker