materialize box doesn't open picture when clicked

I'm creating a page using angular 8 with materialize in which i will need to display some pictures, and if the user click on one of them, i want it to open in fullscreen, materialize has a class where you can do it, but when I use it, the image doesn't open I expected it to open as it opens in this link https://materializecss.com/media.html but it doesn't show any reaction to my click i tried to do like this:

<img src="assets/img/test.png" class="materialboxed">
that's my html page
<div class="container ">
    <h1>Materialize Image Gallery</h1>
    <div class="row card">
        <div class="col s12 m6 l4">
            <img src="assets/img/test.png" class="materialboxed">
        </div>
        <div class="col s12 m6 l4">
            <img src="assets/img/test1.png" class="materialboxed">
        </div>
        <div class="col s12 m6 l4">
            <img src="assets/img/test2.png" class="materialboxed">
        </div>
    </div>
</div>

and this is my index page

<!doctype html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <title>Test page</title>
    <base href="/">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="icon" type="image/x-icon" href="favicon.ico">
    <link type="text/css" rel="stylesheet"
        href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css"
        media="screen,projection">
    <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
</head>

<body>
    <app-root></app-root>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"
        type="text/javascript"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
</body>

</html>

Solution

As in your snippets, you didn't initialize the MaterialBox widget as described in the documentation.

Inside your index file, add a script with this JQuery:

  $(document).ready(function(){
$('.materialboxed').materialbox();
});

Or you can add a vanilla Javascript:

  document.addEventListener('DOMContentLoaded', function() {
var elems = document.querySelectorAll('.materialboxed');
var instances = M.Materialbox.init(elems, options);
});

The final index page file using JQuery should be like this:

<!doctype html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <title>Test page</title>
    <base href="/">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="icon" type="image/x-icon" href="favicon.ico">
    <link type="text/css" rel="stylesheet"
        href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css"
        media="screen,projection">
    <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
</head>

<body>
    <app-root></app-root>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"
        type="text/javascript"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
    <script>
  //Added Code
  $(document).ready(function(){
    $('.materialboxed').materialbox();
 //End Added Code
 </script>
</body>

</html>

I hope this answer goona help someone.