Angular - checkbox for string value of "true" or "false" gets checked always

Question

I am working with an Angular application and getting data from a database. What gets returned is a string value, with different kinds of "values", some may be a string of JSON data, some may be just a string of texts, some is a string of boolean "true" or "false", however, it's still just a string.

And I have made changes so the type of input will change depending on what kind of string version it is.

for the "true" and "false", I made it so it now is a checkbox. The checkbox should be checked when it returns "true", and when unchecking, in the console, it now is a "false". But the checkbox is always checked

here are some code snippets

<input class="form-check"
       type="checkbox"
       *ngIf="isBoolValue"
       [(ngModel)]="model.value"
       ng-checked="isBoolValue" />

here I am using both a ngModel and a ng-checked, however, in the form, the only thing that works when submitting is ngModel, to make a change in the database from true to false. isBoolValue is just a boolean to check if this is true or false.

getDataById(id: string) {
  this.dataService.getDataById(id)
    .subscribe(result => {
      this.model = result;
      if (this.model.value === 'true'
        || this.model.value === 'false') {
        this.isBoolValue = true;
      }
    });
}

Any idea how this could be done?

Make a checkbox unchecked if the string value is "false", right now it is always checked because its not true boolean value, just a string value with "true" or "false"

Answer 1

the issue come because isBoolValue is always set to true

an idea can be to cast the value return by your observable to a boolean and use it in the ng-checked

getDataById(id: string) {
  this.dataService.getDataById(id)
    .subscribe(result => {
      this.model = result;
      if (this.model.value === 'true'
        || this.model.value === 'false') {
        this.model.value = (this.model.value === 'true');
        this.isBoolValue = true;
      }
    });
}

<input class="form-check"
       type="checkbox"
       *ngIf="isBoolValue"
       [(ngModel)]="model.value"
       ng-checked="model.value" />

Answer 2

I made some new changes and now it works as expected.

in the ts file i changed from

getDataById(id: string) {
  this.dataService.getDataById(id)
    .subscribe(result => {
      this.model = result;
      if (this.model.value === 'true'
        || this.model.value === 'false') {
        this.isBoolValue = true;
      }
    });
}

To this

getDataById(id: string) {
  this.dataService.getDataById(id)
    .subscribe(result => {
      this.model = result;
      if (this.model.value === 'true') {
        this.model.value = true;
        this.isBoolValue = true;
      } 
      else if(this.model.value === 'false') {
        this.model.value = false;
        this.isBoolValue = true;
      }
    });
}

and in my html file

<input class="form-check"
       type="checkbox"
       *ngIf="isBoolValue"
       [(ngModel)]="model.value" />

Just removed the ng-checked.

I also changed the type on value, from string to any .

value: any; instead of value: string;

When doing this I was able to change the value to a boolean type and hence be able to work with real boolean values and not just string values