ionic 3 - ion-item click not working

Question

I am working on Ionic 3 project. Currently facing issue with ion-item click listener. Case is that, I am adding one text over canvas. Now after adding text, I want to change the style of text. Such like font-family, font-size, bold and Italic. UI wise it's well. But my click listener over ion-item is not working. I don't know what am I doing wrong. Please look once.

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 help will be appreciable.

Answer 1

Sorry to say but it was my mistake because I closed ion-content before it..

<ion-item> will work inside the <ion-content> only.

After closing <ion-content> after <ion-item>, everything working fine..