title: Is there an Angular way of doing: document.getElementById(id).style.display = "none";
body: <p>I have a div with the id of 1. I'm trying to set the display to none dynamically. Is there an Angular way of doing this. Currently, I'm using vanilla javascript. I was asking about doing this dynamically because there will be over 60 divs that will be created from an array.</p>
  <p>In my html</p>
  <pre><code>&lt;div *ngFor=&quot;let item of items; i = index;&quot;&gt;
      &lt;div id={{i}} (click)=hideDiv()&gt;&lt;/div&gt; 
  &lt;/div&gt;
  </code></pre>
  <p>In my method</p>
  <pre><code>hideDiv() {
  return document.getElementById('1').style.display = &quot;none&quot;;
  }
  </code></pre>
  <p>That works but I'm looking for the Angular way of doing the above.</p>
  <p>It was suggested that I use @ViewChild. Here's what I've changed. I can't use a Template Reference Variable as the html divs are created dynamically. Unless someone can let me know how to create the template variables dynamically. Although I don't think it's possible to create template variables with a loop.</p>
  <pre><code>@ViewChild('imgId', { static: true }) elementRef: ElementRef&lt;HTMLDivElement&gt;;
  imgId: string;
  </code></pre>
  <p>Then in the method I have:</p>
  <pre><code>this.imgId = event.path[0].attributes[1].value;
   this.elementRef.nativeElement.style.display = &quot;none&quot;;
  </code></pre>
  <p>The event.path[0].attributes[1].value gets me the id of the image. The imgId shows when I console log it. It's still not changing the display on the div to none. Also I'm getting the error:
  Cannot read properties of undefined (reading 'nativeElement')</p>