I have the following Angular Material List

<mat-list
  role="list"
  
>
  <mat-list-item
    role="listitem"
    *ngFor="let obj of objects"
    (dblclick)="removeObj(obj)"
    
    [title]="obj.text"
  >
    <span >
      <ng-container *ngIf="obj.ps !== ''">
        {{ obj.ps }} : &nbsp;
      </ng-container>
      {{ obj.text }}
    </span>

    <i
      
      (click)="removeObj(obj)"
      style="color: red; float: right"
      title="Delete object"
    ></i>
  </mat-list-item>
</mat-list>

With following CSS classes

.diag-list {
  max-height: 200px;
  overflow-y: auto;
  margin-top: 0.5rem;
  margin-bottom: 0.5rem;
}
.list-selected-objects {
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow-x: hidden;
  width: 100%;
  font-size: 1rem;
}

.diag-list-item {
  font-size: 0.75rem;
  height: auto;
  padding-bottom: 0.4rem;
  padding-top: 0.4rem;
  white-space: nowrap;
}

.diag-list-item:hover {
  background-color: lightgray;
}

.delete-diag-icon {
  font-size: 1.25rem;
}
.delete-diag-icon:hover {
  cursor: pointer;
}

I can remove an object using (dblclick)="removeObj(obj) but not using a click listener in the <i></i>. I think the span overlaps the icon because not the title of the icon Delete object is shown but the title obj.text when I hover over the icon. So, clicking on the icon does not work. I wanted to ask why and what can I do to register clicks on that icon?

CodePudding user response：

You can replace i tag with button like this:

<mat-list-item le="listitem" *ngFor="let obj of objects"
    (dblclick)="removeObj(obj)"  [title]="obj.text">
    <span >
      <ng-container *ngIf="obj.ps !== ''">
        {{ obj.ps }} : &nbsp;
      </ng-container>
      {{ obj.text }}
    </span>

    <button  mat-icon-button (click)="removeObj(obj)" title="Delete object">
      <mat-icon>delete</mat-icon>
    </button>  <--- this replaced for i tag
</mat-list-item>

Example: https://stackblitz.com/edit/angular-lxjpyu

Hope this help!