You can check the input by default by setting the checked attribute (boolean).

Ex.

 <input class="custom-control-input" 
        type="checkbox" 
        (click)="checkConditions($event, data)" 
        id="select_{{i}}"
        [checked]="data.reason === 'qualifyingReason'">

In my angular code, I am using HTML checkbox inside a table which displays rows of elements which the user can click and check. I am making an api call to get the default checked elements. How can I set some of the elements to be checked by default depending on the json ( reasonId ).

Here is my HTML and JSON:

<tr *ngFor="let data of reasonsRatingDowngrade; let i = index">
    <td class="border-left border-right w-3">
        <div class="custom-control custom-checkbox col-2 d-flex align-items-center justify-center">
                    <input class="custom-control-input" type="checkbox" (click)="checkConditions($event, data)" id="select_{{i}}">
                <label class="custom-control-label" for="select_{{i}}"></label>
       </div>
    </td>
<td class="truncate-text ref-number-truncate line-height23">{{data.reason}}</td>

JSON:
[ {
“id” : 6,
“assignmentId” : 241663,
“companyCode” : null,
“reasonId” : 56,
“sortOrder” : 3
}, {
“id” : 7,
“assignmentId” : 241663,
“companyCode” : null,
“reasonId” : 57,
“sortOrder” : 1
}]

JS:

checkConditions(event, data: any) {
if (event.target.checked) {
  this.selectedRows.push(data);
} else {
  this.selectedRows = this.selectedRows.filter(x => x.ratingLetterDetailsId != data.ratingLetterDetailsId);
}

}