vendredi 7 février 2020

Checkbox inside *ngIf panel not trigger with angular

It seems that the checkboxes inside an *ngIf condition don't trigger the event. I tried to reproduce the problem here:

https://stackblitz.com/edit/angular-7-master-uoxd3q

As you can see, we are a main component:

<div class="fake-accordion" *ngFor="let item of items; let i = index" (click)="item.expanded = !item.expanded">
  <div class="head">
    
  </div>
  <app-details (click)="$event.stopPropagation(); $event.preventDefault()" *ngIf="item.expanded" [item]="item">
  </app-details>
</div>

that loops some items. Inside this loop there's another component for the details. It opens only if item.expanded is true. Inside that there are some checkboxes

<div class="details-body">
  <div>
    <input type="checkbox" [(ngModel)]="item.flag1" />Flag1
  </div>

   <div>
    <input type="checkbox" [(ngModel)]="item.flag2" />Flag2
  </div>

   <div>
    <input type="checkbox" [(ngModel)]="item.flag3" />Flag3
  </div>
</div>

but when I try to change the model it doesn't work. I tried to remove this line:

(click)="$event.stopPropagation(); $event.preventDefault()"

but in this way the detail component closes when i click somewhere inside it. Anyway, it's not working too. Is there any other way to do that?




Aucun commentaire:

Enregistrer un commentaire