Unable to close the modal when an angular check box is checked

Question

I am using angular step forms. In one of the form, i have few items with checkboxes. When i check the checkbox the Modal window is opening, but i am unable to close the window when close button on the modal window is clicked.

HTML

<div class = "pop">
 <p><input type="checkbox" name="v" value="B" [checked] = "t1()">test</p>
<div>

<div id="myModal" class="modal">
 <!-- Modal content -->
    <div class="modal-content">
        <span class="close" (click) = "close()">&times;</span>
       <h2>Kasse</h2>   
    </div>

  </div>

ts

close(){
  document.getElementById("myModal").style.display = "none";
}
t1(){
  document.getElementById("myModal").style.display = "block"; 
}

Please guide me through this problem.

Answer 1

More of a suggestion than an answer to your question, but I think it's better you revisit your idea on how you are using Angular. This question should not be answered otherwise, because you'll get stuck more and more if you keep working like this. Have a closer look at how to use the templates, and what you can do, and what you should not do.

For instance, at the moment you are using native functions like getElementById and accessing styling within your component code. This is not the correct way, you should have a look at the template reference variable, in combination with the ngStyle or [style] binding.

On the other hand, you are using a function named t1() inside your component, binded to the checked property. This function should return a boolean on whether or not it's checked, and this function will run -every- change detection cycle. At the moment this function is not returning anything, and setting the display of your modal.

So advice, take a look at the best practices and examples at the angular website. This will give you the best ideas on how to build a robust app