[Solved][Help] ngIf-else not rendering if being used with label (ion-label)

Ionic Framework ionic-v3
1

I’m trying to conditionally render a paragraph with information stored in a component property but ngIf directive is not even showing the else template, cannot even test if the changes detection is working for the way I set the property.

src/pages/booking/booking.html:

<!-- ion-header -->
<ion-content padding>
	<form [formGroup]="formGroup">
		<ion-list>
			<!-- ... ion-items --->
			<a ion-item id="booking_select_city" (click)="selectCity ()">
				<ion-label>Municipio</ion-label>
				<p *ngIf="selectedCity; else noSelectedCity">{{ selectedCity.name }}</p>
				<ng-template #noSelectedCity><p>Seleccione...</p></ng-template>
			</a>
			<ion-item>
			<!-- ... more ion-items --->
		</ion-list>
	</form>
</ion-content>

src/pages/booking/booking.ts

/* imports */
@IonicPage({
	name: 'booking'
})
@Component({
	selector: 'page-booking',
	templateUrl: 'booking.html'
})
export class BookingPage implements OnInit {
	/* properties */
	public selectedCity     : AdministrativeZone;

	/* constructor and other methods */
	public selectCity () : void {
		const modal = this._modalCtrl.create ('city-select');

		modal.onDidDismiss ((data : AdministrativeZone) => {
			this.selectedCity = data;
		});

		modal.present ();
	}
}

The text seleccione... is not being rendered on ionic-app-scripts serve nor even on spec-tests with TestBed. And when I choose the city from the modal, the view doesn’t change either.

Screenshot%20from%202018-05-17%2010-38-59

What am I doing wrong?

2

I’ve just discovered that the problem is not the use of ngIf but the use of something not being an input with an ion-label!

This works:

<!-- ion-header -->
<ion-content padding>
	<form [formGroup]="formGroup">
		<ion-list>
			<!-- ... ion-items --->
			<a ion-item id="booking_select_city" (click)="selectCity ()">
				<h2>Municipio</h2>
				<p *ngIf="selectedCity; else noSelectedCity">{{ selectedCity.name }}</p>
				<ng-template #noSelectedCity><p>Seleccione...</p></ng-template>
			</a>
			<ion-item>
			<!-- ... more ion-items --->
		</ion-list>
	</form>
</ion-content>
1 Like
3

I’ve change the name in order to make the post easy to find by others having this issue.

4

Thanks, I thought I’d never find out where is the problem/