[bootstrap4]dropdownで親要素への伝播を止める方法

Question

以下のsampleというコンポーネント内でドロップダウンメニュー（子）を追加したのですが、ドロップダウン（子）を押下した際に、親要素のクリックイベントも同時に発火してしまう為、子要素のみドロップダウンメニューを開くように実装したいです。

stopPropagationを使用しようと思ったのですが、toggle操作でありclickイベントが発生するわけではなく、どちらのイベントも発火しませんでした。
できればjqueryなしで実現したいです。

使用技術

• angular5
• bootstrap4

コンポーネント構成

• sample.component

|_sample.component.html
|_sample.component.ts

以下、スクリプトになります。
どなたか詳しい方ご教示いただけると有難いです。
よろしくお願い致します。

• sample.component.html

<div>
        <ng-container *ngFor="let sample of sampleList, let i = index" >
            <ul (click)="parentsAction()" class="cursor-pointer" >
                <li>
                    <div class="row" style="box-sizing: border-box;">
                        <div class="col-6 pl-10 pr-2 my-auto" style="box-sizing: border-box;">
                            親イベント発火
                        </div>
                        <div class="col-6" style="box-sizing: border-box;">
                            <div class="row">
                                <div class="col-12 clearfix">
                                    <div class="m-auto float-right">
                                        <div class="dropright">
                                            <i (click)="childOnlyAction()" id="open-dropdown" aria-hidden="true" class="material-icons"  data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">more_horiz</i>
                                            <div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
                                                <a class="dropdown-item">プルダウンアイテム1</a>
                                                <a class="dropdown-item">プルダウンアイテム2</a>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </li>
            </ul>
        </ng-container>
    </div>  

• sample.component.ts

childOnlyAction() {
  event.stopPropagation();
  console.log('click inside input');
  return false;
  //これだと親子どちらもクリックできない
}