how to bind boolean value in angular to the api?

Issue

I have bind value on option button

<select [(ngModel)]="pageInput.isValid">
  <option [value]="true">Valid</option>
  <option [value]="false">Not Valid</option>                            
</select>

2nd.html

<span [hidden]=""
*ngIf="pageInput.isValid== true" class="color">*</span>

when i comparing with this didn't get any change in my result or not showing error, if I comparing value with 'true' as a string I got result but I need value as a Boolean to the api, how can Solved this problem?? please help...

Solution

You were almost there:

<option [ngValue]="true">Valid</option>
<option [ngValue]="false">Not-valid</option>

and then you can use this:

<span [hidden]="" *ngIf="pageInput.isValid" class="color">*</span>

and if you want to have the negative one:

<span [hidden]="" *ngIf="!pageInput.isValid" class="color">*</span>

Answered By - Charlie V