javascript - Angular doesn't find element by id

Question

I'm learning Angular and I'm building a simple calendar component. I want to give an id to the "td" elements and give them classes based on the backend data. If they are reserved by the customer I will give a class "reserved" and then make the background red. My code looks like this:

<tr *ngFor="let week of createArrays()">
    <td *ngFor="let day of week" id="{{ 'id_' + day }}">{{ day }}</td>
</tr>

This will look like:

<td _ngcontent-ehf-c16="" id="id_21">21</td>

Then in the component.ts I use the service to get the reserved dates and save them in a Set.

  closeDates(): any {
    for (const date of this.reserved) {
      if (date.getMonth() === this.date.getMonth() && date.getFullYear() === this.date.getFullYear()) {
        document.querySelector(`#id_${date.getDate()}`).classList.add('reserved');
      }
    }
  }

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.

question from:https://stackoverflow.com/questions/65917860/angular-doesnt-find-element-by-id

Answer 1

Waitting for answers