CODEWITHSUNDEEP
htmlangulartypescript
usenanayake
usenanayake

Reputation: 189

Angular click event binding is not working properly

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?

Upvotes: 2

Views: 2654

Answers (2)

jitender
jitender

Reputation: 10429

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

Upvotes: 2

Adrita Sharma
Adrita Sharma

Reputation: 22213

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

Upvotes: 2

Related Questions