title: implementing collapse in angular using ElementRef
body: <p>I need to implement basic collapse in angular using elementRef but i am finding difficulty understing and the HTML contain i have is a ngfor i need to send the index value to the click event so that it takes the ID of the </p>
  
  <p>Here is the link
  <a href="https://www.w3schools.com/howto/tryit.asp?filename=tryhow_js_collapsible_animate" rel="nofollow noreferrer">https://www.w3schools.com/howto/tryit.asp?filename=tryhow_js_collapsible_animate</a></p>
  
  <pre><code>var coll = document.getElementsByClassName("collapsible");
  // i have replaced this 
  var in_Angular = Array.from(document.querySelectorAll('.collapsible'));
  
  
  var i;
  
  for (i = 0; i &lt; coll.length; i++) {
    coll[i].addEventListener("click", function() {
      this.classList.toggle("active");
  
      console.log(this.classList);
      var content = this.nextElementSibling;  //where this value coming from
      if (content.style.maxHeight){
        content.style.maxHeight = null;
      } else {
        content.style.maxHeight = content.scrollHeight + "px";
      } 
    });
  }
  </code></pre>
  
  <p>i think addEventListener is not required because in angular we have click event. how do i use elementRef in the example.</p>