My method of assigning IDs to elements dynamically using *ngFor looks like this:
<div *ngFor="let section of questionsBySubCat" class="col-md-12">
<div class="subcat-container">
<h4 class="sub-cat">{{ section?.subcategory }}</h4>
</div>
<div *ngFor="let question of section?.questions; let i = index" class="row">
<div class="col-md-11 col-xs-10">
<h5 (click)="toggleAnswer(question)" class="question">{{ question?.question }}</h5>
<div class="answer-div" id="ques-{{question?.subcategory.split(' ').join('')}}-{{question?.num}}">
<br> // DYNAMIC ID HERE ^^
<p [innerHtml]="question?.answer" class="answer-text"></p>
<hr>
<br>
</div>
</div>
</div>
</div>
Although the IDs are correctly created when inspecting the elements in the console, I am facing issues when trying to manipulate the elements using jQuery. Specifically, while logging out the inner HTML works fine, changing the element's CSS properties with jQuery (e.g. setting display to none) does not have any effect. I am puzzled as to why this might be happening.