html

<p-checkbox name="showLinkedRisksOnly" id="showLinkedRisksOnlyChkBx" 
   label="Show Only Linked Risks" binary="true" (click)="showOnlyLinkedRisks($event)"
   [ngModel]="showLinkedRisksOnly" ></p-checkbox>

typescript

showOnlyLinkedRisks($event){
  if(condition){
    this.showLinkedRisksOnly = !this.showLinkedRisksOnly;
  }
}

I am trying to change the state of checkbox back to before it was checked/unchecked based on condition. But for some reason the checkbox and model get out of sync when I do change the value of this.showLinkedRisksOnly. Is it possible to achive

html

<p-checkbox name="showLinkedRisksOnly" id="showLinkedRisksOnlyChkBx" 
   label="Show Only Linked Risks" binary="true" (click)="showOnlyLinkedRisks($event)"
   [ngModel]="showLinkedRisksOnly" ></p-checkbox>

typescript

showOnlyLinkedRisks($event){
  if(condition){
    this.showLinkedRisksOnly = !this.showLinkedRisksOnly;
  }
}

I am trying to change the state of checkbox back to before it was checked/unchecked based on condition. But for some reason the checkbox and model get out of sync when I do change the value of this.showLinkedRisksOnly. Is it possible to achive

• javascript
• html
• angular
• checkbox
• primeng

• Your code looks fine, I'm pretty sure the error can be found elsewhere in the code – Nino Filiu Commented Dec 27, 2018 at 15:25
• Could you elaborate more? ur code seems working. – SeleM Commented Dec 27, 2018 at 15:28
• i am changing the value of model, but its not updating in UI – josh_boaz Commented Dec 27, 2018 at 15:29
• 1 Try [(ngModel)] instead of [ngModel] . – SeleM Commented Dec 27, 2018 at 15:33
• Provide a stackblitz – SeleM Commented Dec 27, 2018 at 15:37

2 Answers 2

Method 1 - Handle ngModelChange + trigger change detection

To make the checkbox readonly, you can handle the ngModelChange event:

<p-checkbox ...
  [ngModel]="showLinkedRisksOnly" 
  (ngModelChange)="showOnlyLinkedRisks($event)">
</p-checkbox>

and follow these steps in the event handler:

1. Set the new value
2. If the checkbox is readonly
   3. Trigger change detection
   4. Put the original value back

constructor(private cd: ChangeDetectorRef) { }

showOnlyLinkedRisks(value) {
  this.showLinkedRisksOnly = value;    // Set the new value
  if (!this.condition) {               // If the checkbox is readonly
    this.cd.detectChanges();           // Trigger change detection
    this.showLinkedRisksOnly = !value; // Put the original value back
  }
}

See this stackblitz for a demo.

Method 2 - Two-way binding + disable control

An alternative method is to use two-way binding, and to disable the control to prevent changes:

<p-checkbox ...
  [(ngModel)]="showLinkedRisksOnly" 
  [disabled]="!condition">
</p-checkbox>

See this stackblitz for a demo.

First, binding onChange event instead of click event. Then add checkbox instance to event

<p-checkbox name="showLinkedRisksOnly" #something id="showLinkedRisksOnlyChkBx" label="Show Only Linked Risks" binary="true" (click)="showOnlyLinkedRisks($event, something)" [ngModel]="showLinkedRisksOnly"></p-checkbox>

And in typescript

showOnlyLinkedRisks(event, control) {
    if (false) {
      control.checked = false;
    } else { this.showLinkedRisksOnly = event.checked; }
}

Sorry for my bad english!