make a parent div clickable except for a child icon-CodePudding

<div
  [ngClass]="{ 'template-row': !isExpandable, 'folder-row': isExpandable }"
  
  (click)="expanderClicked()"
  (click)="itemSelected()"
>
  <i *ngIf="isExpandable" [ngClass]="getArrowIconClass()"></i><i [ngClass]="getIconClass()"></i>
  <span *ngIf="id" >{{ name }}</span>
  <span *ngIf="!id" >{{ name }}</span>

  <i *ngIf="!isExpandable"  id="delete" (click)="deleteTemplate()"></i>
</div>

I want the entire div to be clickable but not the icon with id= delete. I want to have a different click event on that I dont use jquery , i work with TS

CodePudding user response：

You can stop the event to propagate up in the DOM tree with event.stopPropagation() :

(click)="deleteTemplate($event)"></i>

deleteTemplate(e: Event) {
    e.stopPropagation(); // <----event won't travel up 
}