How to preselect PrimeNG Checkbox items?

Question

I am not able to get already selected item. In this code in rp which is an array of type Permission which has one element in it , So basically that value should be selected when I load this div. What will be the mistake?

This is My HTML:-

<div class="gapRowSmall displayFlex flexColumn mb-small" *ngIf="(permissions$ | async)! as permissions">
    <div *ngFor="let permission of permissions" class="p-field-checkbox">
        <p-checkbox [value]="permission" [(ngModel)]="rp" class=" mr-small"></p-checkbox>
        <label>{{permission.name}}</label>
    </div>
    <div class="displayFlex flexJustifyEnd">
        <p-button type="submit" label="Save" styleClass="primary" (onClick)="savePermissions()"
            [appSubmitIndicator]="(isSubmitInProgress$ | async)!"></p-button>
    </div>
</div>

This is My ts file:-

permissions$ = this.store.select(permissionSelector)
    .pipe(takeUntil(this.permissionManagementSubject));

rp: Permission[] = [{ name: 'Create New Transitions', id: 'a45d7806-fbf8-4df7-8248-6f636288ff23' },];

Answer 1

The item in your rp array must completely match one of the items in your Observable permissions array. If not all the fields in the object match, then it will not be selected.

So if the permissions would be loaded in the constructor like this:

  constructor() {
    this.permissions$ = of([
      {name: "aaaaa", id: '123456-789012'},
      {name: "bbbbb", id: '223456-789012'},
      {name: "ccccc", id: '323456-789012'}
    ])
  }

and the selected permissions in rp would be :

  rp: Permission[] = [
    { name: 'aaaaa', id: '123456-789012' },
    { name: 'bbbbb', id: '223456-' }, // This one is incomplete, thus no match
  ];

Then the second one, will not be selected although partially it is matching.

I've a working example of this in stackblitz. https://stackblitz.com/edit/primeng-checkbox-demo-9rhzru?file=src/app/app.component.ts