Working on my Ionic 3 project, I have encountered an issue with the ion-item click listener. The scenario is that I am adding text over a canvas and then attempting to change the style of the text (such as font-family, font-size, bold, and italic). The UI looks good, but unfortunately, my click listener on the ion-item is not functioning as expected. I am unsure of what mistake I may be making. Could someone please take a look?
1. HTML
<ion-row id="fontBar" *ngIf="isAddTextSelected">
<ion-col col-4>
<ion-item>
<ion-label>Fonts</ion-label>
<ion-select [(ngModel)]="selectedFont" (ionChange)="fontChange($event)">
<ion-option *ngFor="let font of fonts" [value]="font.name" [ngStyle]="{'font-family': font.name}">{{font.name}}</ion-option>
</ion-select>
</ion-item>
</ion-col>
<ion-col col-4>
<ion-item>
<ion-label>Sizes</ion-label>
<ion-select [(ngModel)]="selectedFontSize" (ionChange)="fontSizeChange($event)">
<ion-option *ngFor="let fontSize of fontSizes" [value]="fontSize.size">{{fontSize.size}}</ion-option>
</ion-select>
</ion-item>
</ion-col>
<ion-col col-2>
<ion-item tappable="true" (click)="selectBold()">
<img src="assets/imgs/bold.png" />
</ion-item>
</ion-col>
<ion-col col-2>
<ion-item>
<img src="assets/imgs/italic.png" (click)="selectItalic()"/>
</ion-item>
</ion-col>
<!--<ion-col col-1>
<ion-item>
<img src="assets/imgs/underline.png"/>
</ion-item>
</ion-col>-->
</ion-row>
2. CSS
#fontBar {
position: absolute;
bottom: 7%;
height: 50px;
width: 100%;
}
3. Typescript file
selectBold(){
debugger;
if(this.selectedTxtIndex >= 0){
if(this.textAreasList[this.selectedTxtIndex].bold==""){
this.textAreasList[this.selectedTxtIndex].bold = "bold";
}else{
this.textAreasList[this.selectedTxtIndex].bold = "";
}
}
}
selectItalic(){
if(this.selectedTxtIndex >= 0){
if(this.textAreasList[this.selectedTxtIndex].italic==""){
this.textAreasList[this.selectedTxtIndex].italic = "italic";
}else{
this.textAreasList[this.selectedTxtIndex].italic = "";
}
}
}
fontSizeChange(selectedVal){
if(this.selectedTxtIndex >= 0){
this.textAreasList[this.selectedTxtIndex].fontSize = selectedVal;
}
}
fontChange(selectedVal){
if(this.selectedTxtIndex >= 0){
this.textAreasList[this.selectedTxtIndex].fontFamily = selectedVal;
}
}
Note- I added the debugger point, but click event not triggering. Even I search, according to that someone was saying change position absolute to relative. Even though it didn't worked.
Any assistance would be greatly appreciated.