javascript - Angular: Prevent Default only in parent div

Question

I have a bootstrap dropdown menu in my angular app. Inside the dropdown there are some menu links. On click of the dropdown div I have used $event.stopPropagation() and it stops the default behavior. But now when I am clicking on the menus inside dropdown the dropdown is not closing. Maybe the links inside the parent div also getting affected.

Is there any way i can prevent the default actions only for parent div, not for menu links?

<div class="header-profile-options dropdown">
 <a
  class="dropdown-toggle"
  href="javascript:void(0)"
  id="profileDropdown"
  role="button"
  data-toggle="dropdown"
  aria-haspopup="true"
  aria-expanded="false"
 >
   <span class="icon-setting"></span>
 </a>
 <div class="dropdown-menu dropdown-custom" (click)="$event.stopPropagation()">
   <div class="profile-dropdowwn-header">
      <h5>Manage Profile</h5>
   </div>
   <div class="profile-dropdown-menu">
      <ul>
         <li><a href="#">Profile Info</a></li>
         <li><a href="#">Change Password</a></li>
         <li><a href="#">General settings</a></li>
         <li><a href="#">Messages</a></li>
      </ul>
   </div>
   <div class="profile-dropdown-footer">
      <a href="#">Logout</a>
   </div>
 </div>
</div>

Answer 1

等待大神答复