is not a function angular ionic

Question

I have below code in the angular component in the ionic app.
In .html=>

<ion-col *ngFor="let a of article; let i=index" size="4">
         <div (click)="openArticle()">
          <ion-thumbnail slot="start">
          <ion-img [src] ="a.src" > </ion-img>
          </ion-thumbnail>
          <ion-label class="article-title">{{a.title}}</ion-label>
         </div>
        </ion-col>

In .ts =>

openArticle(){
    console.log("test")
}

If I click on tab getting openArticle is not a function at. this function should show a console message.

Answer 1

Try adding tappable to your div

<div tappable (click)=“myFunction($event)”>

Answer 2

Try with below code

<ion-col *ngFor="let a of article; let i=index" size="4" tappable (click)="openArticle()">
     <ion-thumbnail slot="start">
          <ion-img [src] ="a.src" > </ion-img>
     </ion-thumbnail>
     <ion-label class="article-title">{{a.title}}</ion-label>
</ion-col>

Answer 3

Can you please make sure that the openArticle() function is inside the component that refers to the .html page?

Maybe it's inside the .ts file but not inside the component class.