how to seperate button click and li click at the same li?

Issue

I have this simple GUI in angular and css, every line is li inside ul and span. The functionality is such that when I press on li background a pop-up opens and when i press on button another thing is happening(This is what should happen). The problem is that when i press the button two things happens:

1. the li's pop-up shows up.
2. the action of the button started.

how can i seperated them?

<li class="liSensors" [class.selected]="channel === selectedChannel" (click)="onSelect(channel)" *ngFor="let channel of channels">
<span class="cellSensorNameSpn"> 
<button type="button" class="cellSensorNameBtn">
  <span class="cellSensorNameSpn">{{channel.sensorName}}</span>
</button>
</span>
<span class="cellPSpn">{{channel.p}}</span>
<span class="cellFSpn">{{channel.s}}</span>
<span class="cellSFSpn">{{channel.f}}</span>
<span class="cell">{{channel.i}}:{{channel.p}}</span>
<span class="cell">{{channel.ou}}:{{channel.o}}</span>
<span class="cell">{{channel.b}}/{{channel.o}}</span>
<span class="cell">{{channel.f}}/{{channel.o}}</span>

<span class="cellSB">
<ul class="smallButtonsUl">
  <li class="smallButtonsLi">
    <button class="smallButton" type="button" (click)="onStartChannel(channel)">
      <span class="smallButtonName">Start</span>
    </button> 
    <button class="smallButton" type="button" (click)="onStopChannel(channel)">
      <span class="smallButtonName">Stop</span>
    </button>
    <button class="smallButton" type="button" (click)="onDelete(channel)">
      <span class="smallButtonName">Delete</span>
    </button>
    <button class="smallButton" type="button" (click)="onCopy(channel)">
      <span class="smallButtonName">Copy</span>
    </button>
  </li>
</ul>

Solution

Just use "$event.stopPropagation()" in button

<ul>
    <li (click)="liClick()">
         hello
         <button (click)="$event.stopPropagation();buttonClick()">
           click
         </button>
    </li>
</ul>

NOTE: I like execute two functions in the .html, but you can also pass as argument to buttonClick the event and make stopPropagation in function buttonClick

 <button (click)="buttonClick($event)">click</button>

buttonClick(event:any)
{
   event.stopPropagation()
   ....other actions...
}

Answered By - Eliseo