Ion-checkbox inside ngIf or ngSwitch not working

Working

<ion-list>
                <ion-item *ngFor=" let answer of question.Answers">
                             <ion-label>{{answer.Description}}</ion-label>
                            <ion-checkbox (change)="change($event, answer)"></ion-checkbox>
               </ion-item>
            </ion-list>

Not working 1

<ion-list>
                <ion-item *ngFor="let answer of question.Answers">
                    <ng-container *ngIf="QuestionType.MutipleChoice==question.QuestionType_Id">
                            <ion-label>{{answer.Description}}</ion-label>
                            <ion-checkbox (change)="change($event, answer)"></ion-checkbox>
                    </ng-container>                    
                </ion-item>
            </ion-list>

Not working 2

<ion-list>
                <ion-item *ngFor=" let answer of question.Answers">
                    <ng-container [ngSwitch]="question.QuestionType_Id">
                        <ng-container *ngSwitchCase="QuestionType.MutipleChoice">
                            <ion-label>{{answer.Description}}</ion-label>
                            <ion-checkbox (change)="change($event, answer)"></ion-checkbox>
                        </ng-container>
                    </ng-container>
                </ion-item>
            </ion-list>

This one is working but only until I am trying to enter the checkboxes inside…
Tried with templates , span tags instead of ng-container… etc…

 <ion-list>
                <ion-item>
                    <div *ngFor="let answer of question.Answers">
                        <div [ngSwitch]="question.QuestionType_Id">
                            <span *ngSwitchCase="QuestionType.YesNo">
                                                <span *ngIf="answer.Description=='Yes'" style="  display: inline-block;">
                                                            <button ion-fab  right><ion-icon name="checkmark"></ion-icon></button>
                                                        </span>
                                                 <span *ngIf="answer.Description=='No'" style="  display: inline-block;">
                                                                <button ion-fab color="danger" left><ion-icon name="close"></ion-icon></button>
                                                        </span>
                            </span>
                            <ng-container *ngSwitchCase="QuestionType.OneChoise">
                                {{ answer.Description }}
                            </ng-container>
                            <ng-container *ngSwitchCase="QuestionType.MutipleChoice">
                                {{ answer.Description }}
                                <!-- <ion-label>{{ answer.Description }}</ion-label> -->
                                <!-- <ion-checkbox color="dark" checked="answer.checked" [(ngModel)]="answer.checked"></ion-checkbox>
                                             -->
                            </ng-container>

                        </div>
                    </div>
                </ion-item>
            </ion-list>

The ngSwitch works for other types like - yes no , or one choice , but not here when adding ion checkbox. The json is working also, meaning without the checkbox or without the switch I can see the multiple options.

Any ideas how I can solves this ? What am I missing?
Puling hear for a day now…

If you don’t get any better answers, a couple of heuristics I have settled on:

  • forget all about ngSwitch and just stick with ngIfs
  • don’t put structural directives on things inside <ion-item>, only put them on the <ion-item> itself

Not sure if it would have an impact, but I see you have

(change)="someFunction($event, x)"

As opposed to

(ionChange)=...

Tried also with ngIf. No luck.
Can you give an example?

Regretfully no imppact

I think this will answer my question


Trying it now.