Angular recursive overlapping component cdkmenu

Question

Hi everyone I have a component in angular which will call itself if it has children. and I have cdkmenu which is triggered when selecting a component. now the problem is whenever I select a child component it will trigger all parent and child cdkmenu. please guide me to find the right way to resolve it. Thank you in advance. eg: assuming this is a component-a HTML page.

    <div *ngFor="let item of container?.controls"
    [cdkMenuTriggerFor]= "optionMenu" 
    [cdkMenuPosition]="positions"
    [cdkMenuTriggerData]="{ control: item }"
    >

    <component-a [element]="item"></component-a>
  </div>

  <ng-template #optionMenu let-control="control">
    <div class="control-menu-bar" cdkMenu>
      <button></button>
      <button></button>
    </div>
  </ng-template>