How to check checkbox base on value

Issue

My thought I received value "Yes" and "No" . I want to check checkbox if i received "Yes" and uncheck checkbox when i received "No"

Data received

{
  "expires_in": 0,
  "data": [
    {
      "id": 0,
      "patientId": 2143,
      "substanceAbuseAlcohol": "No",
      "substanceAbuseMarijuana": "Yes",
}]}

Code that i tried this code always check the checkbox even if i received Yes or No. I wanted to check only when received data is Yes from Api

 <section class="pleft ptop">
              <mat-checkbox color="primary"
              (change)="patientPastHistoryForm.get('substanceAbuseAlcohol').setValue(
                $event.checked ? 'Yes' : 'No')" 
                checked="patientPastHistoryForm.get('substanceAbuseAlcohol')==='Yes'" 
               >Alcohol</mat-checkbox><br>
            
              <mat-checkbox (change)="patientPastHistoryForm.get('substanceAbuseMarijuana').setValue(
                $event.checked ? 'Yes' : 'No')"
                checked="patientPastHistoryForm.get('substanceAbuseMarijuana')==='Yes'"  color="primary" >Marijuana</mat-checkbox><br>
              <mat-form-field>
                <mat-label>Other</mat-label>
                <input type="other" matInput formControlName="substanceAbuseOther" 
                placeholder="">
              </mat-form-field>
          </section> 

form

 this.patientPastHistoryForm = new FormGroup({
      patientId: new FormControl(this.clientId),
      substanceAbuseAlcohol: new FormControl('No'),
      substanceAbuseMarijuana: new FormControl('No'),

Solution

According to this example from the Angular Material documentation, I suggest you to use [(ngModel)] to control the state of your checkboxes.

I created a Stackblitz demo to show you how to use it: demo

In your case, when you receive your data, please update the checked variable in the class with your desired value, lets say 'Yes' is true and 'No' is false, and your checkbox will be updated.

Answered By - ilpianoforte