Is it possible to visually distinguish the selected mat-grid-tile? Particularly when they are being created dynamically

Question

Is it possible to visually distinguish the selected mat-grid-tile? Particularly when they are being created dynamically

On the user interface, I have a dynamic display of mat-grid-tile within a mat-grid-list. These tiles change in number and data based on backend values. When a user clicks on a mat-grid-tile, it triggers a function that receives the tile's data. My goal is to visually highlight the clicked mat-grid-tile until the user navigates away.

I've attempted using mat-grid-tile:active{background-color: #333} to change the background color upon click, but it only flashes for a brief moment instead of remaining highlighted.

I am looking for a solution where the selected tile remains visibly highlighted with the changed background color until the user leaves this page or section.

html css angular user-interface angular6

Answer 1

Answer №1

When working on an HTML file, you can use the following code snippet:

<mat-grid-title (click)="highlight($event)">...</mat-grid-title>

For the TypeScript file, you can implement the following function:

public highlight(ev) {
  var target = event.target || event.srcElement || event.currentTarget;

  target.classList.add("bg-blue");

  myOldDataProcessingFunction();
}

By utilizing this approach, you are able to access the element and apply style changes or add additional classes as needed.

Answer 2

When working on an HTML file, you can use the following code snippet:

<mat-grid-title (click)="highlight($event)">...</mat-grid-title>

For the TypeScript file, you can implement the following function:

public highlight(ev) {
  var target = event.target || event.srcElement || event.currentTarget;

  target.classList.add("bg-blue");

  myOldDataProcessingFunction();
}

By utilizing this approach, you are able to access the element and apply style changes or add additional classes as needed.

Is it possible to visually distinguish the selected mat-grid-tile? Particularly when they are being created dynamically

Answer №1

Similar questions

Placing an image on a three.js cube using overlay does not function properly

The CSS class is not properly implemented in the React component

Pressing the reset button on a basic calculator

Error: React Component not rendering correctly - Element Type Invalid

Retrieving table information using javascript

Deleting an element from an array stored in local storage with the help of jQuery

CSS Only flyout navigation - reveal/hide with a tap or click

The jQuery selectors are not able to identify any dynamically generated HTML input elements

Tips for implementing a hover transition effect in the navigation menu

Can I format fixed text alongside a label in an angular material form to match the styling of an input, ensuring they have consistent typography?

php$insert new field into mysql table using form insertcell

An error occurred while validating with JQuery AJAX: Undefined object does not contain any properties

Exploring Angular's @Input feature for components buried deep within the hierarchy

Navigating route parameters in Angular Universal with Java

Should I use Object.assign or define class properties?

Upgrade from Angular 7 to the latest version, Angular 8

Creating a dynamic table in HTML and Angular is a simple process that involves utilizing the

What could be the reason for JavaScript code successfully exporting to Excel using the old office extension .xls but encountering issues when trying to export

Ways to receive real-time notifications upon any modifications in my cloud firestore database?

Give a class to the element contained within an anchor tag