[Fixed] Print the name of a checkbox in ion-textarea if checked. on IONIC


im trying to print the name of checked checkboxes in an ion-texarea. The app ask for the name, the genre(masculine, femenine) and description(tall, small, smart, ugly, etc.), at the bottom there’s an ion-textarea to print a sentence like, Name is a genre and She/He is description of checked checkboxes.
ex. John is a Man and he is Tall, Smart, and Ugly.

Image of the App

the html code i have is:

      <ion-label color="primary">Genre</ion-label>
        <ion-item *ngFor="let genre of genre"> 
          <ion-checkbox slot="end" [(ngModel)]="genre.isChecked"></ion-checkbox>
    <ion-label color="primary">Descripcion</ion-label>
  <ion-col><ion-button expand="full"  (click)="gen(); result()" >Criticar</ion-button></ion-col>
  <ion-textarea [ngModel]="critica"></ion-textarea>

the typescript code is:

export class HomePage {

genre: any=[
    {name:'Masculino', isChecked: false},
    {name:'Femenino', isChecked: false}

    this.genero=this.genre.filter(value => {return value.isChecked});

    this.critica = this.genero;


You haven’t added the full code I guess. Even the description values are not disapplying. Anyhow I did a modification to your code so you can get the values of what you have checked. It might help you to proceed.

Currently your text area shows as [object] kind of output.

Try to refactor your code like mentioned in below. So you can get the checked values. But make sure to disable the other check boxes on the current section once you checked a checkbox. checkbox.

gen() {
    this.genre.forEach(item => {
      if(item.isChecked == true){
        this.genero = item;

  result() {
    this.critica = this.genero.name;

Leave a Reply

(*) Required, Your email will not be published