I am working on an angular7 application that includes a dropdown list with radio buttons for each item. However, I am facing an issue where the radio button is not checked by default on successful conditions. Below is the code snippet from my component.html
<ul class="status-table-ul" (click)="$event.stopPropagation()">
<li class="status-table-li" [ngClass]="[selectedIndex === i ? 'selected' : '' , filterOpt.label === 'All' ? 'all' : '']" *ngFor="let filterOpt of referralFilterOptions;let i = index" (click)="onFilterSelect(i,filterOpt.label)">
<label class="container">{{filterOpt.label}}
<input type="radio" [(ngModel)]="selectedFilterOption" name="radio" [value]="filterOpt.label" [checked]="i === selectedIndex">
<span class="checkmark"></span>
</label>
</li>
</ul>
Furthermore, in my component.ts file, the code looks like this
selectedIndex : number = 0;
onFilterSelect(index: number, opt: string){
this.selectedIndex = index;
this.refLinkArr = opt === 'All' ? this.masterRefLinkArr : this.masterRefLinkArr.filter(item => item.link_status === opt)
$("ul.status-table-ul").removeClass("show-menu");
The issue I am facing is that upon component load, the radio button of the first element should be checked. However, it remains unchecked on page load. }