Как сделать весь угловой компонент кликабельным

Question

У меня есть следующий шаблон:

<mat-nav-list class="myList">
    <a mat-list-item *ngFor="let item of items">
        <my-component-selector class="myItem" [item]="item"></my-component-selector>
    </a>
</mat-nav-list>

my-component-selector - это селектор компонента MyComponent, который имеет следующий шаблон:

<a class="item-description" routerLink="/details/{{item.getId()}}">{{item.getDescription()}}</a>
<button mat-icon-button (click)="deleteItem(); $event.stopPropagation();"><mat-icon>delete</mat-icon></button>

Как видите, нажатие на описание элемента перенаправляет меня к деталям, но я бы хотел, чтобы весь компонент был кликабельным, а не только текст. Как мне этого добиться?

Answer 1

Если вы переместите кнопку внутри тега a и стилизуете ее так, чтобы она заняла всю доступную ширину и высоту, вы сможете получить то, что хотите:

Шаблон MyComponent:

<a class="item-description" routerLink="/details/{{item.getId()}}">
  {{item.getDescription()}}
  <button mat-icon-button (click)="deleteItem(); $event.stopPropagation();"><mat-icon>delete</mat-icon></button>
</a>

MyComponent CSS

::ng-deep my-component-selector{
    display:flex; 
    flex-grow:1;
}
a{
  display:inline-block;
  width:100%;
}

Я создал быстрое и неприличное Stackblitz .

Answer 2

, если вы хотите обработать щелчок в шаблоне. Поместите <div> в шаблон и добавьте туда событие клика

Answer 3

вы можете использовать событие click для компонента, оно будет вызывать действие, когда вы щелкнете по компоненту

 <my-component-selector class="myItem" [item]="item" (click)="DoSth($event)"></my-component-selector>