how to restrict context menu opening in Angular?

I have a nested div structure. The Main div width 100% have one context menu. The child div width 25% have one context menu. When I click child div both context menu getting open. how to restrict the parent one? can anyone please help

 <div class="icon-td" (contextmenu)="sheetMenu($event);">
        <button mat-icon-button  
          (click)="hideChild(lineitem)">
          <mat-icon class="mat-icon-rtl-mirror">
            {{lineitem.display ? 'expand_less' : 'chevron_right'}}
          </mat-icon>
        </button>
        <div >
          <mat-icon class="note-icon">sticky_note_2_outline</mat-icon>
        </div>
        <mat-form-field floatLabel="never" class="line-item-field"  (contextmenu)="lineItemMenu($event);">
          <input [style.marginLeft.px]="lineitem.level * 16" matInput
           [value]="lineitem.lineItem" [id]="'line_'+lineitem.id">
        </mat-form-field>
      </div>

Expected is only lineItemMenu should open. but both sheetMenu and lineItemMenu getting open.