Modal js to Angular

Question

i need help with this:

I try to use modal js in angular without any other librarys, this is the original code:

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";
  }
}

i try using viewchild but i couldn't get it to work, how should i do it?

(this is my html code)

<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>