Necesito ayuda con esto:

Intento usar modal js en angular sin ninguna otra biblioteca, este es el código original:

 var modalBtns = [...document.querySelectorAll(".preview")]; modalBtns.forEach(function(btn){ btn.onclick = function() { var modal = btn.getAttribute('data-modal'); document.getElementById(modal).style.display = "block"; } }); var closeBtns = [...document.querySelectorAll(".modal-close")]; closeBtns.forEach(function(btn){ btn.onclick = function() { var modal = btn.closest('.modal'); modal.style.display = "none"; } }); window.onclick = function(event) { if (event.target.className === "modal") { event.target.style.display = "none"; } }

Traté de usar viewchild pero no pude hacerlo funcionar, ¿cómo debo hacerlo?

(este es mi código html)

 <article *ngFor="let user of users" class="post-user"> <img class="preview" data-modal="modal" src="{{user.img}}"> <div class="m-details"> <h3>{{user.name}} <span>– {{user.lastname}}</span> </h3> <p>{{user.desc}}</p> </div> <div id="modal" class="modal"> <div class="post-container"> <span class="modal-close">&times;</span> <div class="post-header"> <h2 class="title-02">Title</h2> </div> <div class="post-content"> <img class="post-img" src="{{user.img}}"> <div class="user-description"> <div class="post-data"><span class="bold nameB">Title </span><span class="pName01">{{user.name}}</span></div> <div class="post-data"><span class="bold descB">Desc: </span><p class="pDesc01">{{user.desc}}</p></div> </div> </div> </div> </div> </article>