What could be causing the Ioncol not triggering the Onclick event?

I am facing an issue where my onclick event is not working on an ion-col. The error message says that the method I call "is not defined at html element.onclick". Here is a snippet of my code:

<ion-row style="width:100%; height:6%; border: 1px solid #36B729; position:absolute; top:51.5%;">
            <!-- Wall Tab -->
            <ion-col id="WallTab" style="height:100%; border: 1px solid #36B729" align="center" onClick="TabManagement(this.id)">

              <font id="WallTab" style="color: #36B729; font-size: 70%">Wall</font>

            </ion-col>
            <!-- Happy Customers Tab -->
            <ion-col id="HappyCustomersTab" style="height:100%; border: 1px solid #36B729" align="center" onClick="TabManagement(this.id)">

              <font id="HappyCustomersTab" style="color: white; font-size: 70%">Happy Customers</font>

            </ion-col>
            <!-- Reports Tab -->
            <ion-col id="UnhappyCustomersTab" style="height:100%; border: 1px solid #36B729" align="center" onClick="GoBack();">

              <font id="UnhappyCustomersTab" style="color: white; font-size: 70%">Unhappy Customers</font>

          </ion-col>
        </ion-row>

Here is how my ts file looks like:

public class profile{

TabManagement(){

code...

} }

Answer №1

It is recommended to simply use (click)="GoBack()" Also, consider using (click)="TabManagement(id)" instead of including this

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Delving into the World of CSS

I have been working on changing the background image using this JavaScript code, but I am not sure what to reference in the CSS file. Despite reading through everything, my screen still remains blank. $(function() { var body = $('body'); var bac ...

Error encountered when an Angular expression is changed after it has already been checked in a dynamically generated component

I am encountering a problem with Angular and the CdkPortal/CdkPortalHost from @angular/cdk. I developed a service that allows me to associate a CdkPortalHost with a specified name and set its Component at any given time. This is how the service is struc ...

Sharing a let value within *ngFor loop from template to .ts file - here's how

Is it possible to use the async pipe to share the interpolation value {{ticketType.name}} with the .ts component in order to work with this value efficiently? Here is a sample of the template code: <mat-option *ngFor="let ticketType of ticketTypes ...

The sluggish rendering speed of AngularJS is causing a delay in displaying the loader

Within my application, I have tabs that load a form in each tab with varying numbers of controls. Some tabs may contain a large number of controls while others may have fewer. My goal is to display a loader while the contents are being rendered into the HT ...

I'm looking to efficiently convert JSON or GeoJSON data into a Backbone model and then seamlessly transition that model into a Leaflet layer. Can anyone provide guidance on

As I work on refining layer definitions that can be added individually to a collection, my goal is to smoothly render the view or add them to a L.LayerGroup using the leaflet api. However, being new to JavaScript, I am uncertain about how to map the proper ...

There seems to be an issue with the functionality of Array.filter when trying to use it with arrays

I am facing an issue with filtering branchId from an Array. Here is the code snippet and steps I have taken. const [branchID,setBranchID]=React.useState([]); const tempTwo=[ { branchId: "61b25e0ae177d62ce4cb3b47", bra ...

Cannot update VUEjs array following the splice operation

My array is only updating in the console and not in the DOM. I've already tried using :key but it's still not working. Here is my code: <div style="margin-top: 5px;" v-for="(file, index) in editedItem.file_name" ...

Attempting to execute a PHP script through a JavaScript if statement

I have a form that requires validation with JavaScript. In one of the if statements, after all other conditions have been validated, I want to execute my PHP script that updates an SQL database with one of the passwords. Here is the final validation code: ...

Tips for refreshing HTML multiple file upload without reloading the page

I am currently working on a feature that involves counting the number of files uploaded. If more than 10 images are uploaded, I want to clear the input field while keeping everything else in the form intact. Everything was working fine until I encountered ...

Managing browser cache while developing locally

During development testing, how can you selectively disable caching for local scripts and styles while keeping cache enabled for external ones? Ideally in Firefox. When editing css, js, or sprite files on my developmental site, I find myself needing to fr ...

What is the process for adding an event listener in React?

Currently, I am working on a chat application that involves both users and agents. I am facing an issue where I need to retrieve messages when the agent responds using a separate Rainbow UI. According to the documentation, this can only be achieved using a ...

Error: Attempting to use hooks outside the scope of a function component in react-native. Hooks can only be called within the body of a

Oops! An error occurred: Invalid hook call. Hooks can only be called inside the body of a function component. There are several reasons why this might have happened: You could have incompatible versions of React and the renderer (e.g., React DOM) Your cod ...

Steps to begin again an Ionic application on IOS operating system

Currently, I am in the process of developing an Ionic application for both Android and IOS platforms. One challenge I am facing is that if any errors occur either on the server side or client side, the app automatically restarts. For Android, I have succe ...

Exploring the world of React-Bootstrap elements and properties

I'm currently diving into a Bootstrap home project and it's my first time working with Bootstrap. I came across a tag that has an 'inverse' attribute among others like 'fixedTop', 'fluid', and 'collapseOnSelect& ...

Encountering a Difficulty while attempting to Distinguish in Angular

I am currently working on a form where I need to dynamically add controls using reactiveForms. One specific task involves populating a dropdown menu. To achieve this, I am utilizing formArray as the fields are dynamic. Data: { "ruleName": "", "ruleD ...

Issue with displaying jqplot in a jQuery page

Currently, I'm utilizing jqmobile pages for switching between various pages in an html5 application. One of these pages features a jqplot chart. Below is the code snippet: <div data-role="page" id="page-two" data-title="Page 2"> &l ...

Unable to find the desired match with Regex

I'm attempting to use a regex to replace content within brackets, but I'm encountering an unexpected result. This is the text I'm trying to target: Foo (bar) Below is the regex pattern I am using: /(?=\().*(?=\))/ My expectati ...

Keep the first column of an HTML table fixed as you scroll horizontally

Below is an HTML table that I have created: <table id="customers" class="table table-bordered" width="100%"> <thead> <tr> <th colspan="2">Activities</th> <th>Mon 17</th> <th>Tue 18</th> </thead> ...

Is there a way to deactivate the click function in ngx-quill editor for angular when it is empty?

In the following ngx-quill editor, users can input text that will be displayed when a click button is pressed. However, there is an issue I am currently facing: I am able to click the button even if no text has been entered, and this behavior continues li ...

Struggling to incorporate infinite scroll feature into JSON script that is already functioning smoothly

After developing a phonegap application, I created a page called photos.html to fetch photos from my server using JSON. However, despite successfully retrieving all the photos stored in my MySQL database on the server with JSON, I struggled to integrate In ...