title: Angular doesn't find element by id
body: <p>I'm learning Angular and I'm building a simple calendar component. I want to give an id to the &quot;td&quot; elements and give them classes based on the backend data. If they are reserved by the customer I will give a class &quot;reserved&quot; and then make the background red.
  My code looks like this:</p>
  <pre><code>&lt;tr *ngFor=&quot;let week of createArrays()&quot;&gt;
      &lt;td *ngFor=&quot;let day of week&quot; id=&quot;{{ 'id_' + day }}&quot;&gt;{{ day }}&lt;/td&gt;
  &lt;/tr&gt;
  </code></pre>
  <p>This will look like:</p>
  <pre><code>&lt;td _ngcontent-ehf-c16=&quot;&quot; id=&quot;id_21&quot;&gt;21&lt;/td&gt;
  </code></pre>
  <p>Then in the component.ts I use the service to get the reserved dates and save them in a Set.</p>
  <pre><code>  closeDates(): any {
      for (const date of this.reserved) {
        if (date.getMonth() === this.date.getMonth() &amp;&amp; date.getFullYear() === this.date.getFullYear()) {
          document.querySelector(`#id_${date.getDate()}`).classList.add('reserved');
        }
      }
    }
  </code></pre>
  <p>After the function runs it still doesn't have the reserved class.
  If I run the same querySelector code in the console it finds the element and makes the background red.</p>