Как повесить обработчик клика на много кнопок в через фреймворк Angular?

И висит на каждом div обработчик, но когда будет таких div-элементов 100 штук.

Например: есть какая-то директива, или что-то такое, чтоб 1 раз где-то написать обработчик, и всё, чтоб не вставлять его в каждый div?

Вот есть чуть дивов:

<div (click)="checkInfo()">
  <ul>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
  </ul>
</div>
<div (click)="checkInfo()">
  <ul>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
  </ul>
</div>
<div (click)="checkInfo()">
  <ul>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
  </ul>
</div>
<div (click)="checkInfo()">
  <ul>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
  </ul>
</div>
<div (click)="checkInfo()">
  <ul>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
  </ul>
</div>


Ответы (1 шт):

Автор решения: Sergey Glazirin

Если блоки одинаковые, как указано в примере, то скорее всего их данные можно разместить в массиве, а после отобразить через директиву ngFor, и в ней же на каждый блок в цикле навесить метод (click), и передать в него аргументом элемент из цикла, чтобы была привязка к конкретной записи.

<div *ngFor="let item of items" (click)="checkInfo(item)">
  <ul>
    <li>{{item | json}}</li>
    <li></li>
    <li></li>
    <li></li>
  </ul>
</div>

→ Ссылка