show checked when the option is selected - html

Question

I have two API, one that returns the list of all permissions and second that returns the list of selected permissions(contains permission Object) now I want to show the list of permissions in checkboxes but if the permission is already selected then show checkmark with it.
component.ts
getUserPermissions() {
this.permissionService.getUsersPermission().subscribe(permission => {
this.permission = permission;
})
}
getAssignedPermissions(uuid: any) {
this.permissionService.getAssignedPermissions(uuid, true).subscribe(res
=>{
this.userPermission = res;
})
}
component.html
<form id="permission" #form="ngForm" (ngSubmit)="onSubmit()" class="form-group">
<div *ngFor="let permission of permission" >
<label>
<input type="checkbox"
value="{{permission.code}}"
[(ngModel)]="permission.Checked"
[ngModelOptions]="{standalone: true}"
/>
{{permission.code}}
</label>
</div>
<button type="submit" class="btn theme-btn btn-secondary">SAVE</button>

Answer 1

You can simplify this by using async-await and iterate through permissions to check whether user permission is existing.
async getAllPermissions() {
this.userpermission = await this.permissionService.getUsersPermission().toPromise();
this.permission = await this.permissionService.getAssignedPermissions(uuid, true).toPromise();
this.permission.forEach(permission => {
if (this.userPermission.find(uPermission => uPermission === permission)) {
permission.Checked = true;
}
})
}

Answer 2

You can use a method that check if the permission is already assigned
<form id="permission" #form="ngForm" (ngSubmit)="onSubmit()" class="form-group">
<div *ngFor="let permission of permission" >
<label>
<input type="checkbox"
value="{{permission.code}}"
[ngModel]="permission.Checked || isassigned(permission)"
(ngModelChange)="permission.Checked = $event"
[ngModelOptions]="{standalone: true}"
/>
{{permission.code}}
</label>
</div>
isassigned(permission) {
const p = this.userPermission.find(p => p.code === permission.code)
return this.userPermission.find(p => p.code === permission.code) ? true: false
}
live code

Answer 3

You should just use [] for ngModel
<form id="permission" #form="ngForm" (ngSubmit)="onSubmit()" class="form-group">
<div *ngFor="let permission of permission" >
<label>
<input type="checkbox"
value="{{permission.code}}"
[ngModel]="permission.Checked"
[ngModelOptions]="{standalone: true}"
/>
{{permission.code}}
</label>
</div>
<button type="submit" class="btn theme-btn btn-secondary">SAVE</button>