Project specs:
Ionic Cordova
Ionic 7
Angular 18.0.3
*ngIf not working.
page.html
<code><ion-segment [(ngModel)]="segment" (ionChange)="typeChange($event)">
<ion-segment-button value="right">
<ion-label>Right</ion-label>
</ion-segment-button>
<ion-segment-button value="missing">
<ion-label>Missing</ion-label>
</ion-segment-button>
<ion-segment-button value="damaged">
<ion-label>Damaged</ion-label>
</ion-segment-button>
</ion-segment>
<div *ngIf="segment == 'right'">
Right
</div>
<div *ngIf="segment == 'missing'">
Missing
</div>
<div *ngIf="segment == 'damaged'">
Damaged
</div>
</code>
<code><ion-segment [(ngModel)]="segment" (ionChange)="typeChange($event)">
<ion-segment-button value="right">
<ion-label>Right</ion-label>
</ion-segment-button>
<ion-segment-button value="missing">
<ion-label>Missing</ion-label>
</ion-segment-button>
<ion-segment-button value="damaged">
<ion-label>Damaged</ion-label>
</ion-segment-button>
</ion-segment>
<div *ngIf="segment == 'right'">
Right
</div>
<div *ngIf="segment == 'missing'">
Missing
</div>
<div *ngIf="segment == 'damaged'">
Damaged
</div>
</code>
<ion-segment [(ngModel)]="segment" (ionChange)="typeChange($event)">
<ion-segment-button value="right">
<ion-label>Right</ion-label>
</ion-segment-button>
<ion-segment-button value="missing">
<ion-label>Missing</ion-label>
</ion-segment-button>
<ion-segment-button value="damaged">
<ion-label>Damaged</ion-label>
</ion-segment-button>
</ion-segment>
<div *ngIf="segment == 'right'">
Right
</div>
<div *ngIf="segment == 'missing'">
Missing
</div>
<div *ngIf="segment == 'damaged'">
Damaged
</div>
page.ts:
<code>
segment = "right";
typeChange(event) {
console.log(this.segment);
}
</code>
<code>
segment = "right";
typeChange(event) {
console.log(this.segment);
}
</code>
segment = "right";
typeChange(event) {
console.log(this.segment);
}
Above is my code.
Expected output
Actual output
Please, help me find a solution.
Thank you
Please try the below code in page.ts:
<code>segment: string = 'right'; // Default to 'right'
typeChange(event: any) {
this.segment = event.detail.value; // Update segment value on change
console.log(this.segment); // Log for debugging
}
</code>
<code>segment: string = 'right'; // Default to 'right'
typeChange(event: any) {
this.segment = event.detail.value; // Update segment value on change
console.log(this.segment); // Log for debugging
}
</code>
segment: string = 'right'; // Default to 'right'
typeChange(event: any) {
this.segment = event.detail.value; // Update segment value on change
console.log(this.segment); // Log for debugging
}
Use the strict equality operator (===) instead of ==.
<code><ion-segment [(ngModel)]="segment" (ionChange)="typeChange($event)">
<ion-segment-button value="right">
<ion-label>Right</ion-label>
</ion-segment-button>
<ion-segment-button value="missing">
<ion-label>Missing</ion-label>
</ion-segment-button>
<ion-segment-button value="damaged">
<ion-label>Damaged</ion-label>
</ion-segment-button>
</ion-segment>
<div *ngIf="segment === 'right'">
Right
</div>
<div *ngIf="segment === 'missing'">
Missing
</div>
<div *ngIf="segment === 'damaged'">
Damaged
</div>
</code>
<code><ion-segment [(ngModel)]="segment" (ionChange)="typeChange($event)">
<ion-segment-button value="right">
<ion-label>Right</ion-label>
</ion-segment-button>
<ion-segment-button value="missing">
<ion-label>Missing</ion-label>
</ion-segment-button>
<ion-segment-button value="damaged">
<ion-label>Damaged</ion-label>
</ion-segment-button>
</ion-segment>
<div *ngIf="segment === 'right'">
Right
</div>
<div *ngIf="segment === 'missing'">
Missing
</div>
<div *ngIf="segment === 'damaged'">
Damaged
</div>
</code>
<ion-segment [(ngModel)]="segment" (ionChange)="typeChange($event)">
<ion-segment-button value="right">
<ion-label>Right</ion-label>
</ion-segment-button>
<ion-segment-button value="missing">
<ion-label>Missing</ion-label>
</ion-segment-button>
<ion-segment-button value="damaged">
<ion-label>Damaged</ion-label>
</ion-segment-button>
</ion-segment>
<div *ngIf="segment === 'right'">
Right
</div>
<div *ngIf="segment === 'missing'">
Missing
</div>
<div *ngIf="segment === 'damaged'">
Damaged
</div>
2