how to bind Pre-populated data from object to radio button in Angular 5

Question

I am working on Angular 5 application. I got radio button for Gender which value is pre-populated radio selection based on value it receving and I need to know how to use ng-if inline in html template. GenderType: string where value 1 is for male and 2 for female.

I have tried *ngIf but its not working out

 <div class="k-form-field">
     <span>Gender</span>
          <input type="radio" name="gender" id="female" class="k-radio" *ngIf:{{respondent.genderType='1'}} === checked="checked" disabled>
           <label class="k-radio-label" for="female">Female</label>

          <input type="radio" name="gender" id="male" class="k-radio" disabled>
             <label class="k-radio-label" for="male">Male</label>
  </div>

That's not how you write ngif. It's `*ngIf=""` – RockGuitarist1 Feb 22 '18 at 18:49 — RockGuitarist1, Feb 22 '18 at 18:49

Christian Benseler · Answer 1 · 2018-02-22T19:02:45.517

1

You don't need ngIf to change the value form a property. You can just use a block of javascript for a conditional attribute:

<input 
   type="radio"
   name="gender"
   id="female"
   [attr.checked]="respondent.genderType=='1' ? 'checked' : null" />

Another option is to use forms in an "Angular way", either with ngModel or with Reactive Forms.

edited Feb 22 '18 at 19:02

answered Feb 22 '18 at 18:48

Christian Benseler

7,907
8
40
71

getting error compiler.js:466 Uncaught Error: Template parse errors: Parser Error: Bindings cannot contain assignments at column 23 in [respondent.genderType='1' ? 'checked' : null... – K.Z Feb 22 '18 at 18:56
My code had a typo, I have fixed it. It should be == instead of = (in other words, a comparison and not an assignment). – Christian Benseler Feb 22 '18 at 19:03

score 1 · Answer 2 · answered Feb 22 '18 at 18:48

1

Assuming genderType 1 is female and 2 is male, you only has to bind that in the checked attribute. You don't need the ngIf. NgIf is to display or hide a html element. Try with this (also I removed the disabled attribute):

<div class="k-form-field">
     <span>Gender</span>
          <input type="radio" name="gender" id="female" class="k-radio" [attr.checked]="respondent.genderType === '1' ? 'checked' : null">
          <label class="k-radio-label" for="female">Female</label>

          <input type="radio" name="gender" id="male" class="k-radio" [attr.checked]="respondent.genderType === '2' ? 'checked' : null">
          <label class="k-radio-label" for="male">Male</label>
  </div>

answered Feb 22 '18 at 18:48

Alan Grosz

1,175
10
15

getting error compiler.js:466 Uncaught Error: Template parse errors: Parser Error: Bindings cannot contain assignments at column 23 in [respondent.genderType='1' ? 'checked' : null – K.Z Feb 22 '18 at 18:55
You are assigning not comparing. Check my example is with === not = – Alan Grosz Feb 22 '18 at 20:04
Ok, that is because is a number, not string so it has to be === 1 – Alan Grosz Feb 24 '18 at 16:19

score 0 · Accepted Answer · answered Feb 23 '18 at 08:41

final answer that works for me

<div class="k-form-field">
    <span>Gender</span>
      <input type="radio" name="gender" id="female" class="k-radio" [attr.checked] ="respondent.genderType=='2' ? 'checked' : null" disabled>
      <label class="k-radio-label" for="female">Female</label>

       <input type="radio" name="gender" id="male" class="k-radio" [attr.checked] ="respondent.genderType=='1' ? 'checked' : null" disabled>
       <label class="k-radio-label" for="male">Male</label>
</div>

how to bind Pre-populated data from object to radio button in Angular 5

3 Answers3

Linked