Material Nested Tree Node does not detect click event when clicked like Material Tree Node

Question

Material Nested Tree does not detect a click event whereas Material Tree Node detects a click,I checked some solutions and they put a button inside material nested tree, Is this the best and only solution we have for material tree? Please help.

Below is my html template

<mat-tree  [dataSource]="dataSource" [treeControl]="treeControl" class="example-tree">
    <mat-tree-node *matTreeNodeDef="let node;" matTreeNodeToggle (click)="selectednode = node"
    [ngClass]="{ 'background-highlight':selectednode === node  }"  (contextmenu)="onRightClick($event)" >
      <div style="visibility: hidden; position: fixed"     [style.left]="contextMenuPosition.x"
        [style.top]="contextMenuPosition.y" [matMenuTriggerFor]="contextMenu">
      </div>
      <mat-menu #contextMenu="matMenu">
        <button mat-menu-item (click)="add(selectednode)">Add</button>
        <button mat-menu-item *ngIf="selectednode && selectednode.id === 0 ? false: true"
          (click)="remove(node)">Remove</button>
      </mat-menu>
       <mat-icon  class="folder-icon-spacing" fontSet="far" fontIcon="fa-folder"></mat-icon> 
        <div class="node-format item-font">
        {{node.sectionTitle}} </div>
      
      <div class="align-setproperties item-font" (click)="showProperties(node)">Set Properties</div>
     
       
      <!-- <div style="display:block;min-height: 10px;" *ngFor="let sibling of node.items" matTreeNodeOutlet  >
          {{sibling}}
      </div> -->
     
      
    </mat-tree-node>
    <mat-nested-tree-node *matTreeNodeDef="let node; when: hasChild"  (click)="selectednode = node"  >
      <div class="mat-tree-node"   matTreeNodeToggle    (contextmenu)="onRightClick($event)" 
        [ngClass]="{ 'background-highlight':selectednode === node  }">
        <!-- <button mat-icon-button matTreeNodeToggle [attr.aria-label]="'Toggle ' + node.name"> -->
          <mat-icon class="folder-icon-spacing" fontSet="far"
          [fontIcon]="treeControl.isExpanded(node) ? 'fa-folder-open' : 'fa-folder'">
        </mat-icon>
        <mat-icon class="mat-icon-rtl-mirror chevron-color">
          {{treeControl.isExpanded(node) ? 'expand_more' : 'chevron_right'}}
        </mat-icon>
        <!-- </button> -->
        <div class="node-format item-font">
          {{node.sectionTitle}} </div>
        <div class="align-setproperties item-font" (click)="showProperties(node)">Set Properties</div>
      </div>
      <div [class.example-tree-invisible]="!treeControl.isExpanded(node)" role="group">
        <ng-container matTreeNodeOutlet>
        </ng-container>
      </div>
      <div style="visibility: hidden; position: fixed" [style.left]="contextMenuPosition.x"
        [style.top]="contextMenuPosition.y" [matMenuTriggerFor]="contextMenu">
      </div>
      <mat-menu #contextMenu="matMenu">
        <button mat-menu-item (click)="add(node)">Add</button>
        <button mat-menu-item *ngIf="selectednode && selectednode.id === 0 ? false: true"
          (click)="remove(selectednode)">Remove</button>
      </mat-menu>
      <!-- <div  *ngFor="let sibling of node.items" style="display:block;min-height: 10px;"  >
          {{sibling}}
      </div> -->
    </mat-nested-tree-node>
  </mat-tree>