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

Execute a zoom out action by pressing the (Ctrl) and (-) keys simultaneously in Javascript

Configuring ag-grid in an Angular project

Assign a specific value to each object

Struggling to click on a link while viewing the site on your mobile device?

The essential criteria for script tag and page validation requirements

Arranging the placement of the dropdown menu

After my jQuery functions are executed, my CSS rules are loaded

Modify the name of the selected option value

The Ajax success function is failing to trigger after receiving a 200 network response

Obtain the URL of the parent window from a modal dialog using JavaScript

The presence of '<!DOCTYPE html>' causes my website's content to compress

Develop interactive web applications using Typescript

Tips for submitting a form with AngularJS version 4

What could be the reason my black overlay doesn't show up when the button is clicked?

Troubles with retrieving Array data for a JavaScript column chart

Show/hide functionality for 3 input fields based on radio button selection

Is it possible for me to tap into the component creation process within the Angular Router?

Expansive dropdown menu stretching across the entire width, yet the content within restricted to a width of

Cross-component communication in Angular

Retrieving radio button value in Angular 2