Есть ли способ выделить нажатую мат-сетку-плитку? Когда каждый mat-grid-tile генерируется динамически

Question

Я динамически показываю mat-grid-tile в mat-grid-list в пользовательском интерфейсе, чьи номера и данные меняются в зависимости от их значений в серверной части. Они генерируются динамически. Щелчок по любому элементу mat-grid-tile вызывает функцию и передает ей данные для продолжения. Я хочу идентифицировать плитку mat-grid, на которую щелкнули, и держать ее выделенной, пока пользователь не будет перенаправлен на другую страницу.

Я пробовал плитку mat-grid-tile: active {background-color: #333}, который менял цвет фона на секунду, как вспышка, когда пользователь щелкает, а не после.

{{tile.Name}}

Я ожидаю, что выходные данные плитки будут выделены измененным цветом фона в течение остального времени, пока пользователь не будет выгнан с этой страницы или div.

Answer 1

В html файле:

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

В ts файле:

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

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

  myOldDataProcessingFunction();
}

таким образом вы можете получить элемент. Теперь вы можете изменить стиль или добавить другой класс.