Here's a straightforward scenario involving HTML:
<!--
Generated template for the FormulasPage page.
See http://ionicframework.com/docs/components/#navigation for more info on
Ionic pages and navigation.
-->
<ion-header>
<ion-navbar>
<ion-title>Formulas</ion-title>
</ion-navbar>
</ion-header>
<ion-content>
<div class="formula" *ngFor="let j of items ; let i = index" id='{{i}}' (tap)="loadFolder(j.color)" no-lines no-padding>
<ion-grid>
<ion-row>
<ion-col>
<img src="{{j.url}}">
<div class="formulabar" #formulabar>{{j.color}}</div>
</ion-col>
</ion-row>
</ion-grid>
</div>
</ion-content>
The key part is the (tap) handler on div.formula. This snippet deals with that:
loadFolder(color) {
console.log("load folder");
console.log(color);
this.navCtrl.push(FormulaPage);
}
The console message appears - "load folder", but the page doesn't switch.