How can I have a checkbox checked by default, angular

Issue

I have a checkbox list brought by an array of an external procedure, what I want is that a specific data can be shown already marked by default.

This is what I have so far:

(https://i.stack.imgur.com/gjXwL.png)

As you can see the code in the input section I have divided it into two due to being able to do different tests, but what I want is just a checkbox row and the value that says PCP is marked by default

             <ng-template #showGrid>
                  <tbody class="TableNota">
                      <tr *ngFor="let item of creditosList; let row_no = index">
                                      <td *ngIf="userType!==137" class="text-center">
                                          <input type="checkbox"
                                              class="chk"
                                              [id]="'credito'+ creditosList.DOCUMENTO_FAVOR"
                                              [value]="item.DOCUMENTO_FAVOR"
                                              (change)="guardarList(item,$event.target.checked)"
                                              *ngIf = "item.FORMA_PAGO == 'PCP'"
                                              checked = "true"
                                              />  
                                      </td>
                                      <td class="text-center">{{ item.DOCUMENTO }}</td>
                                      <td class="text-center">{{ item.CONTRATANTE }}</td>
                                      <td class="text-center">{{ item.MONEDA }}</td>
                                      <td class="text-center">{{ item.MONTO | number:'1.2-2' }}</td>
                                      <td class="text-center">{{ item.FORMA_PAGO }}</td>
                          </tr>
                  </tbody>
              </ng-template>

This is how I currently have it

(https://i.stack.imgur.com/lFpcs.png)

I have tried to put it this way but as you can see, the checkbox list disappears and only one is marked

(https://i.stack.imgur.com/cJv6X.png)

(https://i.stack.imgur.com/45P0r.png)

The result I expect would be that only the value that says PCP is checked by default and the list of checkboxes appears.

Any kind of help I appreciate in advance :)

Solution

You could try the following:

1. Remove the *ngIf as it will hide the checkboxes for all items with FORMA_PAGO !== 'PCP'

2. Bind expression item.FORMA_PAGO === 'PCP' to the [checked] input

   <input type="checkbox"
       class="chk"
       [id]="'credito'+ creditosList.DOCUMENTO_FAVOR"
       [value]="item.DOCUMENTO_FAVOR"
       [checked]="item.FORMA_PAGO === 'PCP'"
       (change)="guardarList(item, $event.target.checked)"
   /> 
   

Answered By - majusebetter