CODEWITHSUNDEEP
htmlangularradio-buttonngfor
Anupama Karunarathna
Anupama Karunarathna

Reputation: 117

pass id of the selected checkbox(which areloaded with ngFor) when it is checked

       <form name="check-boxes">
          <div *ngFor="let quest of noOfQuestions">
            <div class="form-check form-check-inline" *ngFor="let ans of noOfAnswers">
              <label class="form-check-label">{{ans}}
               <input class="form-check-input" type="checkbox" name="{{quest}}" id="{{quest}}{{type}}" value="{{ans}}"  (change)="getAnswers(id)"> 
              <span class="form-check-sign"></span>
             </label>
            </div>
          </div>
      </form>

Sample Output in angular componentx.html: enter image description here

This code generates a set of checkbox according to noOfQuestions and noOfAnswers provided. I want to pass the particular id of the checkbox to the function 'getAnswer' when a checkbox is checked. Passed parameter 'id' value in ts file, is said undefined. What should be the parameter to getAnswer() to pass the seleced checkbox's id???

Upvotes: 5

Views: 1412

Answers (2)

Binara Thambugala
Binara Thambugala

Reputation: 776

Do like this.

In your html

(change)="getAnswers(quest,type)"

In your typescript

//I have no idea about the types of parameters you used.
getAnswers(quest: any, type: any) 
{
    console.log('Id: ' + `${quest}${type}`);
}

Upvotes: 1

jeprubio
jeprubio

Reputation: 18002

if you pass the $event:

(change)="getAnswers($event)"

then you should have access to that input element in your typescript file through event.target but it's also important that you check whether is checked or not:

getAnswers(event) {
   if (event.target.checked) {
      console.log('checked: ' + event.target.id);
   } else {
      console.log('unchecked: ' + event.target.id);
   }
}

Upvotes: 3

Related Questions