how to disable routerLink For an Inner Element-CodePudding

hello guys i have a problem with routerLink i gave it to a li but i don't want it to work for an inner Element of li my HTML is like this:

     <li class="list-item bg-list-item padding-x" [ngClass]="selected && index == 2 ? 'list-grow' : ''" routerLink="/task">
        <input type="checkbox" id="item2">
        <h1 id="self">
          Board Name
          <label for="item2"><i class="icon gray right-align icon-Edit large" (click)="rename(2)"></i></label>
        </h1>
        <h1 id="edit">
          <input type="text" placeholder="rename board name">
          <label for="item2"><i class="icon gray right-align icon-OK large" (click)="rename(0)"></i></label>
        </h1>
        <h4 class="free-space-top-x gray">Last Modified by Alfred</h4>
        <ul class="free-space-top-2x horizontal-list">
          <li class=""><i class="icon gray icon-Tasks-List medium"></i>10</li>
          <li class=""><i class="icon gray icon-Employees-Count medium"></i> 3</li>
          <li class=""><i class="icon gray icon-Comment medium"></i> 99</li>
          <li class=""><i class="icon gray icon-Bell medium"></i>9</li>
        </ul>
      </li>

and i don't want routerLink work for labels

CodePudding user response：

change

(click)="rename(2)"

(click)="rename(2, $event)"

and rename source to :-

rename(id, event) {
  event.stopPropagation();
  //remaining code
}

CodePudding user response：

Just add this to your click event:

(click)="$event.stopPropagation(); rename(0);"