Unable to Trigger Click Event on Div Element in Angular 9

Take a look at my HTML code snippet

<mat-grid-list cols="3" rowHeight="150px">
 <mat-grid-tile
    *ngFor="let tile of tiles;index as j;"
     [colspan]="tile.cols"
     [rowspan]="tile.rows"
     >
   <div (onclick)="openbox();" style="z-index: 2">
                                       
          {{tile.text}}<br>
          <img src="https://images.unsplash.com/photo-1514888286974-6c03e2ca1dba?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=1027&q=80" height="200px" width="260px">
   </div>
    </mat-grid-tile>
</mat-grid-list>

TypeScript section

export class RegistrationComponent implements OnInit {
...
 openbox(){
    console.log('clicked')
  }
...
}

Methods I attempted:

 style="z-index: 2; position: relative;"

Incognito

Browser Chrome Angular-9
I am aiming to retrieve the index of the clicked mat-grid-tile. Is there another approach to achieve this?
Thank you

Answer №1

To handle events in Angular, it is recommended to use the (click) event binding instead of onClick. The Angular Compiler does not recognize browser events prefixed with 'on'. To properly utilize events in Angular, simply remove the 'on' prefix when using event bindings.

<div (click)="openbox();" style="z-index: 2">
   ...
</div>

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

Tips for fading an image as you scroll using CSS and JavaScript?

I have been dedicating my day to mastering the art of website development. However, I am facing a challenge that is proving to be quite difficult. I am looking to create a smooth transition effect where an image gradually blurs while scrolling down, and re ...

What is the best way to close the space between a box-shadow and a div background when incorporating semi-transparent rgba() values?

There seems to be an issue arising when applying partially transparent rgba() background-color and box-shadow color values to an element with a non-fixed (percent-based) border-radius. This combination results in a minuscule transparent gap appearing at th ...

Autocomplete feature seems to be functioning properly in the online demonstration, while it does not seem

I can see that the autocomplete feature is working in the example provided, but it's not functioning properly in my attempt. What could be causing this issue? <!doctype html> <html lang="en"> <head> <meta charset="utf-8> & ...

Move the components over to the right

How can I vertically align the user and the search bar on the right side of the page? #search { float: right; margin-top: 9px; width: 250px; } .search { width: 230px; height: 30px; position: relative; line-height: 22px; } ...

Customize the appearance of polygons in OpenLayers 2 by adjusting the fill color and opacity

I am aiming to use different fill colors and opacity values for various shapes (such as Triangle, Circle, Square, Hexagon, etc.). Although I can draw the shapes, set different titles, and stroke colors with the code below, I'm struggling to define th ...

mdDialog confirmation button malfunctioning

I have been trying to implement Angular Material based on the official documentation, but I am facing issues. The mdDialog doesn't seem to be working as expected and it skips straight to my cancel function without displaying anything. Below is a snip ...

Angular2 route-driven themes

Exploring Different Themes for Two Routes: /books and /paintings Seeking a Solution to Include Specific Stylesheet Links in index.html For the /books route, I wish to include: <link rel="stylesheet" href="/assets/css/reading-theme.css" /> And for ...

Just incorporated Angular Material and Angular Animations into my project and encountered a slew of errors

After executing the command line: npm install --save @angular/material @angular/animations This snippet shows my package.json file: { "name": "cerpnew", "version": "0.0.0", "license": "MIT" ...

Central alignment of div with cursor

I'm experimenting with creating a unique custom cursor using a <div> that trails the movement of the mouse pointer. While the current setup works smoothly, I've noticed that when scrolling down the page, the div lags behind until the scrol ...

The scrolling element mirrors the movement of the scrolling window

Can you help me understand how to create a scrolling element that follows the scrolling of the window? I want the element to scroll down when the window reaches the end, and scroll up when the window is at the top. I tried implementing this functionality ...

White border appears when hovering over MUI TextField

I've been troubleshooting this issue for what seems like an eternity. I've combed through Chrome's inspect tool, searching for any hover styles on the fieldset element, but to no avail. Here's my dilemma... I simply want a basic outline ...

Display a button only when hovering over it

Seeking assistance for a simple task that is eluding me at the moment. I am currently using scss and trying to make a button only appear when hovered over. The button is hidden in the code snippet below, nested within a block alongside some svgs. Any hel ...

What is the best way to create a transparent sticky header that blends with the background while still maintaining visibility over images and text?

On my web page, the background features a radial gradient but the content extends beyond the viewport, causing the center of the gradient to not align with the center of the screen, producing the desired effect. However, I'm facing an issue with a sti ...

What is the best way to align div elements side by side while using a flex direction of column?

I need help aligning the text input next to the h1 tag, inline, and then displaying it as a flex-direction of column. Currently, all inputs are being set in a line with the h1 on top which is not the intended layout. Here is an illustration: https://i.sst ...

Use CSS height:auto for every element except SVG

Is there a way to scale all images on my site while excluding SVG files using native CSS? .myClass img { height: auto; } I have tried the following, but it only targets SVG files: .myClass img[src$=".svg"] {height: auto;} Using != doesn't seem ...

What is the best way to connect or link to a HTML table row <tr>

Is there a way to trigger an alert when the user double clicks on the whole row? ...

Changing the text color of mat-chips in Angular Material

Having a mat-chip-set and multiple mat-chip elements with a custom product-chip class: <mat-chip-set> <mat-chip class="product-chip" *ngFor="let category of categories"> {{category}} </mat-chip> </mat-chip-s ...

The presence of a display block property within a div contained inside an li element results in extra whitespace

I am presenting the code below: <div class="settingsMenu" style="top: 135px; left: 149px; display: block;"> <ul> <li class="download" onclick="downTemplate('template1')">Download</li> <l ...

Trouble with displaying points in Angular2's highcharts

I have implemented the angular2-highcharts chart module in my angular2 web application. Everything works fine when the graph has less than 7000 points, with the line and points displaying correctly. However, once the number of points surpasses 7000, there ...

Checking dynamic controls for validity

In my Angular application, I have a table nested inside a form tag. This table consists of a text box and a dropdown menu. I want to implement validation for these elements, so that an error message is displayed if the user leaves them empty or doesn' ...