Angular click event binding is not working properly

Question

I want to get relevant selections when radio button clicks. my relevant files are as below.

app.component.html

 <div class="col-md-3">
 <b>Select Catogory</b><br>
  <input type="radio" name="colors" [(ngModel)]="typing" (click)= "checktype(typing)" value="Agent">Agent<br>
  <input type="radio" name="colors" [(ngModel)]="typing" (click)= "checktype(typing)" value="Hospital" >Hospital
  <select>                                                                                                                                          
    <option [(value)]="agent" *ngFor="let agent of agents">{{agent}}</option>
  </select>
</div>

app.component.ts

checktype(typing){
   console.log(typing)
   if(typing=="Agent"){
    this.agents=["amila","kasun", "ayesh"]
    console.log(typing)
  }else{
   this.agents=["hemas","general", "Asiri"]
   console.log(typing)
   }
  }

But when I click Agent radio button It display relevant data for Hospital radio button. I can't figure out what is the wrong with code. Any one can help me? Are there any mistakes done by me?

Please fix your indentation, your code as it stands is not readable. — cs95
– cs95, Commented Oct 30, 2019 at 7:39
can you explain But when I click Agent radio button It display relevant data for Hospital radio button — jitender
– jitender, Commented Oct 30, 2019 at 7:43
Could you try by giving local reference (#someName) to your radios and pass the value in the checktype function? — Akash Agrawal
– Akash Agrawal, Commented Oct 30, 2019 at 7:46

Adrita Sharma · Accepted Answer · 2019-10-30 07:43:15Z

2

Replace (click) by (ngModelChange)

Try like this:

Working Demo

<input type="radio" name="colors" [(ngModel)]="typing" (ngModelChange)= "checktype(typing)" value="Agent">Agent<br>
<input type="radio" name="colors" [(ngModel)]="typing" (ngModelChange)= "checktype(typing)" value="Hospital" >Hospital

answered Oct 30, 2019 at 7:43

Adrita Sharma

22.3k11 gold badges75 silver badges85 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Adrita Sharma Over a year ago

You are welcome. I answered this first and then got 2 downvotes, not sure why the hatred!

Vikas Over a year ago

Why use two-way data binding for input control at all? A simple solution would be to pass a custom value to the event handler, Something like this

jitender · Accepted Answer · 2019-10-30 07:47:38Z

2

Use change event instead

<input type="radio" name="colors" [(ngModel)]="typing" (change)= "checktype(typing)" value="Agent">Agent<br>
  <input type="radio" name="colors" [(ngModel)]="typing" (change)= "checktype(typing)" value="Hospital" >Hospital

demo

answered Oct 30, 2019 at 7:47

jitender

10.4k1 gold badge21 silver badges49 bronze badges

Collectives™ on Stack Overflow

Angular click event binding is not working properly

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related